尝试搭建一个个人博客

年前最后几天没什么开发任务了，掘金摸鱼的过程中，翻看下去年一年自己在掘金发布了几篇文章，多是一些记录工作上遇到的问题。但其实这一年更多的开发点滴，因为零散等问题最终都在时间的流逝中消散不见。

一些问题往往因为篇幅的原因不适合单独来写篇文章记录，但一年的积累下来可能它的体量并不小。所以萌发了一个想要将这些小问题一点一滴记录下来的想法，搭建博客也就出现在了我的脑海，于是有了这篇文章。

通过VuePress构建博客页面

1.通过包管理工具初始化项目

yarn init # npm init

2.将vuepress安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

3.创建第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

4.在package.json中添加一些script

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

5.启动本地服务器

yarn dev #npm run dev

此时效果如下：

6.在docs目录下建立.vuepress并在改目录下新建config.js文件可以实现网站的各项配置。 此时目录结构为：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

具体配置详见vuepress官网。

实现博客基础布局：

从图中可以看出vuepress本身很简洁，如果我们想要实现更加美观的页面而又嫌配置麻烦，很幸运我们站在了前人的肩膀上，vuepress本身也支持配置主题，所以我们可以引用喜欢的主题，当然你也可以自己开发主题来为后人乘凉，本人使用的主题是vuepress-theme-reco。

建立github仓库

1.使用github创建项目[name].github.io。 仓库如此命名的原因是，在此目录下可以直接使用https://[name].github.io/ 域名访问你的博客。

2.使用git remote add origin [你的仓库]将本地代码与远程库关联

3.通过git checkout -b 切换到新分支，该分支存放文档源码，master分支用来存放打包好的 HTML 等文件 之所以在master分支存放打包后的文件，是因为如果存放的不是打包后的文件，那么通过https://[name].github.io的域名访问，得到的将是是README自述文件，也可以通过Github Pages改变来源，本质上还是将打包文件放到你要访问的来源上。

通过travis-cl实现自动化打包部署

1.首先我们需要在项目的根目录下建立.travis.yml文件，并写如如下配置

language: node_js
node_js:
    - 10
cache: yarn
install:
    - yarn
script:
    - yarn build
after_success:
    - cd docs/.vuepress/dist
    - git init
    - git config --global user.name "${U_NAME}"
    - git config --global user.email "${U_EMAIL}"
    - git add -A
    - git commit -m 'deploy'
    - git push --quiet --force "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}

• language: 语言选择 这里用node
• node_js：使用的node版本
• cache： yarn缓存
• install： 安装依赖使用的包管理工具，yarn和npm均可 yarn更快
• script： 一切就绪后通过yarn install安装依赖
• after_success： 安装完成后执行的后续操作，将打包文件自动发布到你配置的对应仓库分支，这里的${}是在travis-cl中配置的环境变量，后文再说

2.为travis-cl创建一个Personal access tokens，地址，权限根据自己的需要授权，不必全选。

3.访问travis-cl，使用github账号登录，再进入dashboard,此时就可以看见你的git仓库了。

4.启动进入github.io这个项目，再通过setting，来配置上文提到的环境变量。

• GH_REF: 项目地址（github.com/[name]/[name].github.io.git）注意去掉 https://
• GH_TOKEN: 上面提到的Personal access tokens
• U_NAME：你的github用户名
• U_EMAIL: 你的github邮箱

5.进入github.io仓库的setting页面修改GitHub Pages的值为上面.travis.yml中配置的分支，也可以直接使用master分支。

到这里，travis-ci部署已经完成，我们下一次提交代码到github，就会触发travis-ci自动构建，将打包文件上传到指定分支，上传完成后,就可以通过https://[name].github.io/来访问你的博客了，示例。

总结

其实，目前网络上搭建博客的框架有很多比如我这次使用的vuepress，另外还有hexo、jekyll等等，搭建博客也变的很简单，难的其实是搭建完成后，持之以恒的发布博文，记录自己的技术积累，希望自己能坚持下去。

这次的博客其实是运行在GitHub Page上的，使用的是github提供的服务器，希望未来学习node等服务端语言后，搭建自己的服务器后再将博客搬到自己的服务器上。