2020年，必须拥有本身的博客网站(上)

不少优秀的技术人员都有本身的博客，写博客已经成了一种习惯。做为一名程序员，你，为何要坚持写博客？答案有不少：

• 能让人具有更好的总结能力
• 加深本身对某项技术的理解
• 得到别人的承认
• 提升本身的表达能力
• 为本身的生活留下足迹
• 证实本身的能力
• 开源精神
• 用来装逼
• ...

不论是啥理由，一个优秀的程序员都应该不断的去激励本身，在平常中反省本身，与千万优秀人看齐，把优秀当作一直习惯。

因此，今天咱们就来一步一步实现本身那独一无二的博客！

前言

搭建博客有不少种方案，能够从零开发全部功能(阮一峰的我的网站)，但这有点让人头大，繁琐的事务实在是太多了：页面的编写、后台的开发、留言板的开发。。。让人难觉得继！另外一种方案就是基于现有的集成框架，咱们只关心本身输出的文章，其余的事情都留给框架去作。

目前，这类的框架不少：WordPress、Jekyll、VuePress、Hexo等等，都是很优秀的框架。今天，咱们尝试使用Hexo来搭建博客。

初始化项目

在使用hexo-cli初始化项目以前，咱们须要使用npm以全局安装:

npm install hexo-cli -g
复制代码

初始化一个项目：

hexo init myblog
cd myblog
npm install
hexo server
复制代码

由于网络的缘由，加载的时间可能比较长，耐心等待下。

而后，访问http://localhost:4000/你的博客就这么跑起来了：

就这么跑起来了！！！很难以想象。如今有两个亟待解决的问题：

• 一：博客外观使用的是默认的landscape主题，太死板并且容易撞衫
• 二：咱们的博客如今只是运行在本地，咱们须要将之放到Github上，而且可使用网址访问

咱们先来解决问题二，咱们火烧眉毛地想经过url来访问咱们的站点了!

将代码托管到github上

针对国内访问Github网速很慢，咱们也可使用码云来托管代码，大致的配置都是类似的。只是我的以为Github更正统一点，因此这里使用的是Github

要想将代码托管到Github上，咱们须要新建一个项目：

点击New repository按钮以新建项目：

填写上仓库名称和描述，而后点击Create repository按钮：

看到这个页面，就表明仓库真的建立完成了，如今咱们跟着红框中的步骤，将本地的源码推送到Github上：

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/xch1029/myblog.git
git push -u origin master
复制代码

一切顺利的话，再次访问仓库的页面，咱们看到了提交的代码，这说明咱们本地的源码已经push到了仓库里。

咱们的目标是使用url来访问咱们的博客，因此咱们下一步使用的技术是github-pages，使用github-pages来展现咱们的博客。

自动部署的github-pages

虽然使用的是github-pages，可是这并不意味着咱们须要手动打包再手动部署，这一切繁杂的事务都让travis-ci帮咱们完成吧。

简单介绍下travis-ci：travis-ci是一个不须要本身搭建的在线持续集成工具，其最大的特色就是能和github无缝衔接，并且是无偿使用（针对开源项目）。使用起来也非的常容易，只须要在项目中添加.travis.yml配置文件

配置自动化部署

使用 Github帐号登陆 travis，而后将咱们的博客仓库的开关打开，这是为了告诉 travis容许使用项目中的 .travis.yml以自动部署。

编写.travis.yml

在项目的根目录中添加文件.travis.yml

sudo: false
language: node_js
node_js:
 - 12 # 使用12的LTS版本
cache: npm
branches:
 only:
 - master # 只监听master分支的push
script:
 - hexo generate # 自动化构建的脚本
deploy:
 provider: pages
 skip-cleanup: true
 github-token: $GITHUB_TOKEN
 keep-history: true
 on:
 branch: master
 local-dir: public
复制代码

注意两点：

• 一：在_config.yml中，第17行的root属性，须要改成和项目名字同样，这是为了保证github-pages的静态资源路径引用正确

# 17行改成：
root: /myblog/
复制代码

• 二：在.travis.yml中咱们使用了变量$GITHUB_TOKEN，这是travis可以操做Github的关键。咱们须要在Github中生成一个Token，再复制到travis中:

前往Github新建 Personal Access Token，只勾选 repo 的权限并生成一个新的 Token。Token 生成后请复制并保存好。

回到 Travis CI，前往你的 repository 的设置页面，在 Environment Variables 下新建一个环境变量，Name 为 GITHUB_TOKEN，Value 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持不被勾选 避免你的 Token 泄漏。点击 Add 保存。

这就是全部内容了！！！，将咱们的代码提交了，看看有没有触发travis的自动构建：

git add .
git commit -m "add travis"
git push
复制代码

验证

如今访问地址：xch1029.github.io/myblog，其中的xch1029替换成你的Github名字。

背后的原理

其实，travis新建了一个分支gh-pages以用做展现github-pages，而分支的内容就是咱们构建后的静态资源。

后续文章

由于篇幅限制（不想将文章写得太长，以避免难以阅读），今天就写到这里！由于咱们已经能够访问咱们的博客了！

关于博文撰写、主题配置、自定义样式、自动化部署到服务器等文章，会在后续持续产出，请保持关注！