感受时光。经过了许多人和事,颇有感触,心情复杂,最后觉得有些东西还是写下来好一点,每每看着自己以前写的东西,有开心喜悦,有后悔抱怨,也有嘲笑曾经的年少无知。这个博客带给了许多。我想用文字和图片留下当时的那份心境,仅此而已。所以我们得有一个博客,这个博客没有html的复杂,却能满足我们的大部分需要。

大纲

视频教程

我,视频做得确实不太好,见谅😄

视频有点大,就没有剪辑合并了,凑合着看吧,下面这个是一些细节的地方,上面的视频只是基本的搭建方法

开始使用hexo博客

必须组件:

分别将nodejsgit安装好,安装过程一路回车就行了,接下来我们的操作都要在git提供的Linux终端仿真器—-git bash中操作。

附:其实我更推荐你安装docker.

打开Git bash, 首先,我们得为我们的博客创建一个目录,用来存放我们的主题和文章源码:

1
2
3
4
5
mkdir BlogRoot    #创建一个名为BlogRoot的目录,目录名根据个人喜好命名
npm install hexo-cli -g # 安装hexo框架及其远程部署插件
npm install hexo-deployer-git --save
hexo init BlogRoot #初始化我们的博客根目录,其实就是同步一些必备的文件
cd BlogRoot #切换到我们的博客目录


在博客的更目录下面,使用hexo s命令将博客部署到本地,程序会占用4000 端口,在浏览器中打开http://localhost:4000/ 就可以查看博客了。

至此我们的博客就安装好了,接下来就是怎么写文章,如何在本地查看效果,以及如何部署到公网。


说明:

1
2
3
hexo g  #渲染markdown文件,生成静态的html文件
hexo s #本地部署,可以在浏览器中查看效果,默认部署到:localhost:4000,网站html源文件在public目录下,不过它是热加载
hexo d #将渲染生成的html文件部署到远程仓库,用于在外网中访问,其实是将博客根目录下的public目录中的文件部署过去

安装deployer-git插件(用于部署到支持git的代码托管网站,上文已安装,可以跳过)

1
npm install hexo-deployer-git --save

更换主题

是不是觉得默认的landscape太单调简洁了?不会前端设计?没关系,GitHub上面有很多开发者为hexo设计了许多精美的主题。诸如Nextmellow等等。
在github上面搜索关键字hexo-theme,选择一个你中意的主题,复制它的https仓库地址:

我个人比较喜欢这两个主题:

上面都有详细的帮助文档,如果看不太懂😭,我们可以一起讨论交流

  • 在博客根目录下执行
1
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus   #将主题保存到我们的theme目录下面,目录名为icarus

同时更改我们博客根目录下的_config.yml文件里面的theme字段,更改为主题目录的名字,如上面我们的icarus

博客安装好了,我要怎样写文章呢?
所以我们就有必要了解一下BlogRoot这个文件夹里面各个部分的作用了。

BlogRoot文件夹🏠

BlogRoot文件夹🏠

source文件夹📂

source文件夹📂

themes文件夹😝

themes文件夹😝

  • 文章保存在source/_posts里面,是以.md结尾的文本文件,你可以用文本编辑器打开编辑它,不过我更推荐你用Sublime Text 3,这个文本文件使用的是MarkDown这种轻量级的标记语法,同时兼容HTML ,是纯文本的,不像WordPressPPT那样,当然这是优点。

  • 写第一篇文章
    Git bash(注意你得cd到博客根目录下面,即上文的BlogRoot文件夹下面) ,输入hexo new 我的XX(我的XX-是标题,自拟)
    这时候你就可以在BlogRoot/source/_posts里面看到它,编辑这个文件就OK了。

  • 博客部署到远程仓库

如何从外网访问博客呢?其实我们打开的http://localhost:4000/这个网址它的网站根目录是在blog/public下面,你可以打开public这个文件夹看看,里面就是网站页面的源码,你可以打开这个index.html文件,是不是就是你的博客的主页。只是没有图片而已,所以我们只需要将这个文件夹里面的东西放到一个外网可以访问的地方就行了,好在hexo的配置文件里面已经有相关的设置了,我们只需要稍作更改就行了。

注册github账号,并将文章部署到公网

首先我们先去github或者coding注册一个账号。

由于Github主机在美国,访问速度可能有点慢,所以你也可以部署到Coding,下面以全球最大的开源社区GitHub为例(今年是GitHub十周年)。

1.打开GitHub官网,点击右上角的Sign up注册一个账号。

Sign up

Sign up

  • Username填一个简单一点的英文名,因为以后你的博客就通过Username.github.io来访问的,所以起一个好点的、不太长的名字就很有必要了,比如我的这个Usernameourfor,很短也很好记。

  • Email address填个QQ邮箱📮也是OK的啦

  • Password这个你懂得😳😳

  • step2和step3这个由于我注册过了,我就没打开看了,你看着填吧。

2.新建一个Repository,点击页面上面的New repository

New repository

New repository

  • 这个Repository nameusername.github.io,比如我的就填ourfor.github.io.你的根据你的username填。
  • Public就是这个,点击Create repository就可以完成创建。
  • Description可选,建议勾选☑️Initialize this repository with a README

这时候就会打开仓库主页,依次点击页面右侧的Clone or downloadUse SSH复制框中的Repo地址,待会要用。

3.修改配置文件_config.yml

Sublime Text 3或者其他文本编辑器打开博客根目录下面的_config.yml文件,在文件末尾,找到:

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

改成:

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:ourfor/ourfor.github.io.git,master
#coding: git@git.coding.net:ourfor/ourfor.git,master
branch: master
message: blog update

上面这个git@github.com:ourfor/ourfor.github.io.git是我的仓库的地址,你改成刚才复制的那个就行了,如果你用的是coding你可以把github这一行用#注释掉,去掉coding前面的#。最后保存更改。

4.添加部署密钥.

打开Git bash,输入ssh-keygen -t rsa -C "2320813747@qq.com",这个邮箱地址换成你的。连续四次回车就生成了一对密钥。

1
2
Your identification has been saved in /c/Users/zip/.ssh/id_rsa.
Your public key has been saved in /c/Users/zip/.ssh/id_rsa.pub.

它会告诉你密钥生成在那个文件夹,上面是我的密钥生成路径,下面要相应替换成你的,使用cat来查看公钥内容:

1
cat /c/Users/zip/.ssh/id_rsa.pub

复制输出的内容,打开GitHub,点击页面右侧头像旁边的倒三角,打开Settings,在页面左侧的Personal settings下面定位到SSH and GPG keys这一栏,点击右侧的New SSH key来添加一个密钥,其中Title随意,Key填写上一步Git bash里面生成的那个。最后Add SSH key就行了。

如果要使用username.github.io来访问博客的话,我们需要在仓库的设置里面打开
GitHub Pages这个功能:

打开 GitHub Pages

打开 GitHub Pages

在实际使用过程中我们发现,当你在仓库设置里面打开这个功能后,你的仓库里面会增加一个名为CNAME的文件(通过cname方式解析的),其内容就是你在设置中添加的域名或者是username.github.io,如果你删除这个文件,那么你再次访问你博客的域名,你会发现没有解析到GitHub,你再打开设置就会发现你没有打开GitHub Pages功能,也就是说GitHub实际上是通过这个文件来部署GitHub Pages的。那么我们遇到了一个问题(或许你已经发现了),你每次更新完博客(推送到GitHub)后仓库里面的CNAME就会丢失,又得重新再设置里面打开GitHub Pages功能,这未免也太麻烦了,特别是后期通过GitHub Hooks来更新的话… 所有我们在博客更目录下面source目录下面添加一个CNAME的文件,内容为你博客要使用的域名。

比如在source目录下面执行下面这条命令:

1
echo -e "ourfor.github.io" > CNAME    #通过重定向屏幕输出到文件

这样我就可以通过ourfor.github.io来访问我的博客了

当你写好文章之后,首先得使用hexo g来生成,而hexo s可以在本地查看实际效果,hexo d会自动push到远程仓库,你就可以在浏览器地址栏中输入username.github.io来访问你的博客username是你的GitHub用户名。

ci自动化构建

通过ci来持续集成我们的博客,首先我们得注册一个Travis CI账号,同时把我们的仓库在Travis CI中激活存放博客文章源码的repo(建议设置为私有仓库)

首先在repo更目录下面创建一个名为.travis.yml的配置文件,文件内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
language: node_js
node_js:
- "node"


install:
- npm install
- npm install hexo-cli -g


script:
- hexo clean
- hexo g

after_script:
- cd ./public
- git init
- git config user.name "ourfor"
- git config user.email "ourfor@foxmail.com"
- git add .
- git commit -m "Update blog"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master

branches:
only:
- master
env:
global:
- GH_REF: github.com/ourfor/ourfor.github.io.git

其中GH_REF的值为:博客部署仓库的地址,也就是html源码的仓库地址,不一定是markdown源码仓库的地址。当然你可以分布将这两个东西放在不同的分支喽。
接下来我们就要在GitHub上面获取我们的GH_TOKEN(个人令牌)。

未完待续

参考