hexo + gitee pages 搭建个人博客

一时失言乱红尘 2022-03-09 03:14 394阅读 0赞

## 前言 ##

工作也中遇到问题google，stackoverflow，再加上blog基本上就都解决了。我们感觉解决问题如此简单，是因为有许许多多的开发者做着无私的分享。我们也应该把自己的经验，遇到问题的解决办法分享出来，促进这个圈子的良性循环。现在现成的博客站点各种广告，烦~，所以我们搭建自己可定制的私人免费博客。

### 一、简介 ###

##### Hexo #####

是一个基于node.js开发的开源的静态博客框架，使用Markdown或者其他渲染引擎解析文章，可以在几秒内使用靓丽的主题生成静态网页。没错，我们使用的就是它。

##### Github #####

这个就不用介绍了吧，找开源项目经常逛的就是它了吧。

##### Github Pages /Gitee Pages #####

[Github Pages][] 是一种静态站点托管服务，旨在直接从GitHub存储库托管您的个人，组织或项目页面。

[Gitee Pages][] 与github pages 功能一样。如果您使用过 Github Pages 那么您会很快上手使用码云的 Pages服务。目前Gitee Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

### 二、安装 ###

安装 Hexo 比较简单。但是在安装前，需要先安装下边两个应用程序：

[Node.js][]

安装 Node.js 的最佳方式是使用 [nvm][]或直接点击上边链接下载安装程序安装(版本要求6.0以上)。  
我的ubuntu node.js 版本如下:

chenfr@booyoung:~$ node -v
    v9.10.0
    chenfr@booyoung:~$

在终端中使用下边命令安装:  
cURL:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

or Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

[Git][]

Linux (Ubuntu, Debian)：

sudo apt-get install git-core

我使用的是ubuntu ，其他操作系统自行google，比较简单。

[Hexo][]

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

chenfr@booyoung:~$ npm install -g hexo-cli
    /home/chenfr/.nvm/versions/node/v9.10.0/bin/hexo -> /home/chenfr/.nvm/versions/node/v9.10.0/lib/node_modules/hexo-cli/bin/hexo

至此，所有安装已经完成。

### 三、建站 ###

安装 Hexo 完成后，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder> 
    $ cd <folder>
    $ npm install

下边是我的执行过程

chenfr@booyoung:~$ hexo init testBlog
    INFO  Cloning hexo-starter to ~/testBlog
    正克隆到 '/home/chenfr/testBlog'...

chenfr@booyoung:~$ cd testBlog/
    chenfr@booyoung:~/testBlog$ ls
    _config.yml  node_modules  package.json  package-lock.json  scaffolds  source  themes

文件夹的目录如下：

.
    ├── _config.yml(网站的配置信息，可以在此配置大部分的参数)
    ├── package.json(应用程序的信息)
    ├── scaffolds(模版 文件夹。新建文章时，Hexo 会根据 scaffold 来建立文件。)
    ├── source(存放用户资源)
    |   ├── _drafts
    |   └── _posts
    └── themes(主题 文件夹。Hexo 根据配置主题来生成静态页面。)

然后在该目录下分别执行如下命令来生成一个静态网页

chenfr@booyoung:~/testBlog$ hexo generate
    INFO  Start processing
    INFO  Files loaded in 166 ms
    INFO  Generated: index.html
    INFO  Generated: archives/index.html
    ......

再执行下边命令开启本地服务来预览网页,资源文件夹下有一篇默认的hello world.md 的文章

chenfr@booyoung:~/testBlog$ hexo server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

在浏览器中就可以看见我们的博客了,大致下边这个样子

![format_png][]

上边两条命令可以简写成 hexo g 和 hexo s

### 四、 配置Github ###

绑定Git & Github

在终端中做如下配置:

Github用户名:  
git config --global user.name “your\_username”

注册Github的邮箱:  
git config --global user.email “your\_email@example.com”

然后去博客建立一个专门放博客的仓库，注意事项如下:

![format_png 1][]

仓库建立完成后,根据下边步骤建立git与github的安全连接

##### 配置SSH Key #####

首先查看本地是否已经有SSH Key, 终端输入如下命令：  
cd ~/.ssh;ls

如果存在id\_ras.pub，说明已经有SSH Key，否则需要重新创建。  
我的已经创建过了,如下

chenfr@booyoung:~$ cd ~/.ssh
    chenfr@booyoung:~/.ssh$ ls
    id_rsa  id_rsa.pub  known_hosts  known_hosts.old

使用如下命令生成密钥  
ssh-keygen -t rsa -C “your\_email@example.com”

按提示分别输入Key文件保存路径和密码(可以为空)，完成会有如下提示即表示创建成功

The key fingerprint is:  
01:0a:f6:3c:ca:95:d…:db your\_email@example.com

然后将SSH Key添加到ssh-agent:

eval “$(ssh-agent -s)”  
ssh-add ~/.ssh/id\_rsa

##### 添加SSH Key到Github账户 #####

复制当前用户根目录.ssh文件夹下的id\_rsa.pub文件内容,添加到github 设置中的SSH keys选项下,大致如下图

![format_png 2][]

添加完成后就可以测试ssh连接了,命令如下

`ssh -T git@github.com`

会出来几行提示,大致意思是你当前主机还没有建立安全连接,然后是秘钥指纹,问你是否继续连接,点击yes(因为我的已经点击过了,所以没有提示),完了后会出现如下提示,说明建立ok了

chenfr@booyoung:~$ ssh -T git@github.com
    Hi booyoungchen! You've successfully authenticated, but GitHub does not provide shell access.

## 五、关联Hexo 和 Github ##

##### 配置Hexo #####

进入上边你自己创建的博客根目录,打开目录 配置文件,修改参考下边

#https://github.com/booyoungchen/booyoungchen.github.io.git
    #注意:上一行中booyoungchen两个必须一样,为github的用户名,并且每个冒号后边都有空格
    #repo:为部署到的pages地址(原先部署在github pages上，现在改为码云)
    deploy:
      type: git
    #repo: git@github.com:booyoungchen/booyoungchen.github.io.git
      repo: https://gitee.com/booyoung/blog.git
      branch: master

可以看到我的改为了码云(gitee 仓库),因为github在国内访问特别慢,原理都一样,这个我后边会提到,先按照上边配置(尤其注意注意中的提示,不然网页不会显示)

安装Hexo git插件

`npm install hexo-deployer-git --save`

chenfr@booyoung:~/testBlog$ npm install hexo-deployer-git --save 
    npm WARN deprecated swig@1.4.2: This package is no longer maintained
    ......
    + hexo-deployer-git@0.3.1
    added 31 packages in 8.784s

出现以上提示说明安装成功。

将博客部署到Github

`hexo deploy`

以上命令可以简写成 hexo d

现在就可以使用http://booyoungchen.github.io来访问网站了，结果如下：

![format_png 3][]

## 六、Hexo常用命令 ##

*  新建文章

hexo new [template] "Title"  //新建标题为Title的文章

template是可选参数，就是指定文章模板，默认值为post。在scaffolds路径下，你可以新建或编辑现有模板。  
执行命令后，在source/\_posts/下会生成Title.md文件，该文件就是我们要编辑的博客文件。

*  新建页面

hexo generate  或者hexo  g    //生成静态页面至public目录

*  本地预览

hexo server    或者 hexo  s    //启动本地服务

*  部署到Github

hexo deploy    或者 hexo  d

*  清理已经生成的静态文件

hexo clean   //清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令

## 七、修改主题 ##

我比较喜欢 [yilia][] 主题，如果有需要其他的自行查找。

主题下载完成后，将主题放在themes文件夹下，同时将博客根目录\_config.yml文件中的theme改为yilia

现在就可以启动本地服务来预览我们的新主题了。

由于yilia在github上已经给出如何配置，且比较详细，在此我就说下设置过程中可能会遇到的问题。

1.  如果将文章中或者网站头像使用到的图片放在另一个仓库时，必须将/…/master前边文件夹名称改为raw,不然图片不显示

例如：\#avatar: https://github.com/booyoungchen/blogimages/raw/master/blog/avatar.png

1.  文章文字截断 (文章预览是只显示截断部分而不是全部显示)

设置根目录主配置文件\_config.yml中 excerpt\_link: more

在文章中需要截断的文本后边加``即可。

## 八、迁移到码云 ##

[码云][Link 1]被称为国内版的github，访问速度比github快许多。

没有账号的话先注册，码云支持将github仓库同步到码云仓库，使用步骤与github一样。  
账号创建完成后，将github上的仓库同步到码云，  
![format_png 4][]

同步完成后，仓库就创建好了，点击仓库选项卡里的服务，找到gitee pages，配置gitee pages 服务，

![format_png 5][]  
点击创建，  
![format_png 6][]

将仓库部署到gitee pages，完成如下,  
![format_png 6][]

复制页面网站地址，然后配置本地博客根目录文件repo为repo: https://gitee.com/booyoung/blog.git  
好了，你的代码仓库已经成功迁移到码云。

## 九、配置域名 ##

github可以配置，码云没去研究（因为我的域名没实名认证，无法解析成功，有需要的可以研究下，这里配置的是github）。

使用[阿里云][Link 2]的域名，使用其他服务商的域名配置也差不多。

登录阿里云，在控制面板选项卡中找到域名打开，其中就是你购买的域名，没买过的可以先购买，如下：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pIDgYgYe-1589450740270)(https://gitee.com/booyoung/blogimages/raw/master/blog/hexo\_aliyun\_domain\_home.png)\]

点击解析域名，

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZcYojlZ-1589450740273)(https://gitee.com/booyoung/blogimages/raw/master/blog/hexo.domain\_explain.png)\]  
A指向ipv4地址，CNAME指向另一个域名。解析时尽量不要使用ip，有时侯会变。  
解析完成后在博客根目录创建一个名为CNAME的文件，将你购买的域名写入文件，例如我的是booyoung.top ,注意不要带前缀。然后进入github仓库，设置里边有 Custom domain，将booyoung.top填入应该就ok了。

![format_png 7][]

我域名没实名，所以没测试，如果方法有问题，欢迎给我留言。

## 十、其他 ##

修改代码块的背景色和字体大小(主题默认代码块字体有点儿小) :

themes\yilia\source\main.0cf68a.css
    
    搜索 : .article-entry .highlight,对应背景和字体颜色，修改成你想要的即可

添加访问量和访客数 ：themes/yilia/layout/\_partial/footer.ejs

<div calss="count-span">
    	<span id="busuanzi_container_site_pv">
    		本站访问量: <span id="busuanzi_value_site_pv"></span>次 
    	</span>
    	<span id="busuanzi_container_site_uv">
    		访客数: <span id="busuanzi_value_site_uv"></span>人
    	</span>
    </div>

完整配置如下：

<footer id="footer">
      <div class="outer">
        <div id="footer-info">
        	<div class="footer-left">
        		© <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        	</div>
          	<div class="footer-right">
          		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
          	</div>
        </div>
    
    <div calss="count-span">
    	<span id="busuanzi_container_site_pv">
    		本站访问量: <span id="busuanzi_value_site_pv"></span>次 
    	</span>
    	<span id="busuanzi_container_site_uv">
    		访客数: <span id="busuanzi_value_site_uv"></span>人
    	</span>
    </div>
      </div>
    </footer>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
    </script>

阅读量：  
http://www.janszeng.top/2017/08/30/hexo\_yilia\_count/  
  
好了，博客基础框架已经搭建完成，开启你的博客之旅吧！

参考：  
[不蒜子][Link 3]

[Github Pages]: https://pages.github.com/
[Gitee Pages]: https://gitee.com/help/articles/4136
[Node.js]: https://nodejs.org/en/
[nvm]: https://github.com/creationix/nvm
[Git]: https://git-scm.com/
[Hexo]: https://hexo.io/zh-cn/
[format_png]: /images/20220309/882dcadfa1ed44d2b8b754f297e0a272.png
[format_png 1]: /images/20220309/97bd1a4a8af94fa7867fda7aa98e0824.png
[format_png 2]: /images/20220309/5cb80161577842d3906dd19ae6da8596.png
[format_png 3]: /images/20220309/9376a0b518ba40b78ab80ab16ef970d9.png
[yilia]: https://github.com/litten/hexo-theme-yilia
[Link 1]: https://gitee.com/
[format_png 4]: /images/20220309/1bd6148c0092448b8691d935218c965c.png
[format_png 5]: /images/20220309/fd3157d3cf5a452a93d68e10b279e520.png
[format_png 6]: /images/20220309/9a45f46073024436a94e8df2cc4fd082.png
[Link 2]: https://cn.aliyun.com/?accounttraceid=01cf94f1-afbc-41f1-9acd-0ae110906dfc
[format_png 7]: /images/20220309/fecebfd4e6d24112a9b7f9b42284cda7.png
[Link 3]: http://ibruce.info/2015/04/04/busuanzi/