题外-搭建博客

开场白

哈喽！大家好！我是贼漂亮！今天贼漂亮带所有前端童鞋们满足咱们入坑前端后一直都想做的一件事--------搭建专属于自己的博客！！

所需技术栈

这个真的so easy！一套小流程跑下来，贼漂亮包你满意！
先来瞅瞅咱们需要啥都技术栈～
不对，此刻是不是应该先把我那小博客搞上来，让童鞋们看看效果

二话不说，请点击链接，查看贼漂亮的博客
请别嫌弃俺的博客哦！哈哈哈哈！我就请问这个博客是否是客官您满意的效果呢？
进入正题！！
主要技术栈为vuepress+Travis CI+github pages。我这墨迹的嘴必须再说一句，太方便了，大家一定要实操哦！通过自己搭建这个小博客，你还会对工程化有一个新的认知，对CI/CD有一个新的认知。最最重点的是，你满足了自己搭建专属自己网站的梦想啊！！也不需要买服务器！！就可以搞一个自己网站！！香不香！

vuepress

大家也可以先了解了解vuepress官网说的还是非常通俗易懂的，而且官网其实也有教程的。但是我知道你们肯定希望我继续说下去。秉着对你们负责的心态，我会继续讲下去的！！

Travis CI

相比童鞋们一定知道咱们一个项目发布需要打包上传巴拉巴拉。但是你说如果每次都需要你手动build，在手动发布，对于我们这处于21世纪时代的人，是不是有点不正常！我们能不做的事情我们肯定不会动手去做的！所以，travis CI就是帮我们干这件事情的，当有了它，你只需要小手敲敲git push。直接构建打包发布！！简直不要太方便好嘛！

整个下来没有任何难度，但是满足我们搭建自己小博客的梦想。来吧，步骤开始！

第一步GitHub

• 在GitHub上创建新仓库。不行说没有GitHub啊，没有我打死你！（我这么温柔，去注册一个乖）

• 仓库名最好是github名字.github.io，方便～

• 可以新建个分支，一个分支用来存放源代码，另一个分支用来存放静态文件

• 在Setting中设置分支（用来存放打包后的静态资源）
  
  

• 现在把下面克隆下来！命令给你们哦～

git clone git@github.com:lss-33/lss-33.github.io.git

第二步初始化

• 打开我们的项目，执行以下

yarn global add @vuepress-reco/theme-cli

theme-cli init .

yarn install

yarn dev

yarn build

• 此时会看到一个config文件，我们可以在里面进行配置哦～具体可以参考官网vuepress

第三步 接入Travis

• 在项目根目录下分别创建.travis.yml和deploy.sh两个文件

# 在此贴出.travis.yml,在vuepress文档就说的很详细了，就不做阐述了
language: node_js
node_js:
    - lts/*
cache: yarn
install:
    - yarn install
script:
    - yarn build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: docs/.vuepress/dist
  github_token: $GITHUB_TOKEN # 在 GitHub 中生成，用于允许 Travis 向你的仓库推送代码。在 Travis 的项目设置页面进行配置，设置为 secure variable
  keep_history: true
  on:
    branch: master #这里指的是部署前的源文件分支

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
yarn build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f https://<USERNAME>.github.io master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f https://<USERNAME>.github.io/<REPO> master:gh-pages

cd -

• 此时，我们再次push在travis看到下面就说明成功了！

The command "yarn build" exited with 0.
cache.2
store build cache
dpl_0
1.74s$ rvm $(travis_internal_ruby) --fuzzy do ruby -S gem install dpl
7.04s
dpl.1
Installing deploy dependencies
dpl.2
Preparing deploy
dpl.3
Deploying application
Done. Your build exited with 0.

附上一个链接阮一峰持续集成服务Travis CI教程

小结

贼漂亮觉得这个虽然很简单，但是自己动手操作一遍也是一件很nice的事情，通过自己完成这整个博客的部署、发布等。你会对工程化，CI/CD有一个新的认知。毕竟，你到了公司之后，除非公司原本没有，你才有机会去推动这个，自己去尝试。但是这个很简单，你可以通过小成本搭建一个自己的博客，还熟悉了前端工程化。是不是两全其美呢～ok！散会～～下期见！