hexo博客系统搭建过程

综合技术 hexo gitee 博客

创建时间:2018-02-22 19:29 更新时间:2020-02-22 21:08

字数:2.8k 阅读:

前言
一、先搭建-建立博客系统
二、后装修-个性化配置

搭建Hexo博客的经验贴，便于日后查看，也希望新手少走弯路

前言

说道技术博客，最开始在csdn上记录技术学习笔记较多，坚持时间较长。后来也迁移副本至博客园，可能先入为主的原因，并没有持续同步更新，不久便把博客园删了。后来入坑jekyll、Hexo等开源博客，后来因为考研的原因也都草草收场。博客系统虽搁置一边但笔记还在不断积累，懒出天际的我直接md文档保存在本地，待嫁的深闺文章越积越多。毕业前的新冠疫情来得突然，趁寒假闲来无事刚好把博客这个烂摊子理一理。

花了两周左右完成了gitee+hexo的博客系统，可一键发布并备份，随时随地无缝编辑博客。hexo好处多多，不用自己架服务器，同时主题样式可选种类较多，开源且稳定，最开始用的时候用github管理，后来由于各种原因墙内访问越来越慢（你懂），迁移至gitee托管，访问速度提升不少。

现将搭建过程记录如文，便于日后查看，也希望新手少走弯路。

这里附上我的博客，欢迎交流：https://braincao.cn/

一、先搭建-建立博客系统

安装node.js

到node.js官网下载node.js并安装

安装Git

自行百度安装

本地建立hexo系统

安装hexo：

sudo npm install -g hexo-cli

本地创建自己的blog目录，如HexoBlog，在该目录下进行Hexo初始化：

hexo init HexoBlog
cd ~/HexoBlog/
npm install

远程建立gitee上的hexo系统

用Gitee Pages建立gitee远程博客仓库。

码云注册并建立名为hexoblog的仓库（使用readme初始化项目）
通过 hexoblog项目->Service->Gitee Pages服务 建立博客仓库，它会自动生成博客地址，下文会介绍自定义域名绑定博客地址
添加ssh key：将本地的id_rsa.pub添加到gitee个人中心的ssh key中。为什么要添加ssh key？原因：后续想用git方式通过ssh与远程仓库连接，快捷一些，但为了安全起见，需要公密钥的方式来连接。本地设置gitglobal的user.name user.email，生成一个基于如user.email的ssh key，它是一对私钥和公钥，私钥自己保存别动它，把ssh key中的公钥添加到github官网自己账号中，这样就可以用自己设备很方便的连接至自己的github并享受其服务。如有多台设备，可以每台设备生成一对ssh key，并将多个公钥添加github账号中即可，这样就可以实现多台设备无缝连接，便于移动办公。
在_config.yml中配置博客url、远程Git：

# 配置错误会出现主题样式展示错误
url: https://braincao.cn
root: /

# 发布
deploy:
  type: git
  repo: git@gitee.com:username/repo.git
  branch: master

# 全局搜索
search:
  path: search.xml
  field: post

发布博客到gitee

安装Hexo必备插件：

npm install hexo-deployer-git --save #hexo通过git发布
npm install hexo-wordcount --save #文章统计字数
npm install hexo-generator-search --save #全局搜索

输入命令发布博客，首次发布需要在shell中输入账号和密码:

hexo clean && hexo g && hexo d

github会发布后会自动更新博客页面，码云将此功能变为人民币玩家功能，因此发布后需要在码云仓库中手动update才能更新博客

附常用hexo命令

hexo clean #清除public静态页面缓存（如果有）
hexo new page "pageName" #新建页面

hexo help  # 查看帮助
hexo version  #查看Hexo的版本
hexo new "postName" #新建文章

简写:
hexo n == hexo new #新建文章
hexo g == hexo generate #生成静态页面至public目录
hexo s == hexo server #本地服务，http://localhost:4000预览
hexo d == hexo deploy #部署至github仓库完成博客发布
hexo n page 'about' #建立导航栏菜单，如about关于页面

二、后装修-个性化配置

个性化配置主要包括站点配置与主题配置，跟着hexo官方文档、每个主题的官方指导走就行。第三方功能包括但不限于：首页全文阅读、站内搜索、访问人数、字数统计、打赏功能、gitalk评论、404页面、RSS、sitemap

下面仅以3-hexo为例，罗列下我的个性化配置。

主题下载

Hexo系统有很多主题，较为主流的如Next主题，本文采用3-hexo主题。

git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo

主题配置

在根目录的站点配置文件配置主题即可

theme: 3-hexo

这里注意3-hexo主题有个坑，配置时还需在主题配置文件中更改根目录：

#如果博客放置位置不是根目录，则可以通过配置此路径解决静态文件路径错误问题
#比如访问地址为 yelog.org/blog 那就需要配置为 blog_path: /blog 才能正常访问

blog_path: /hexoblog #记得改这里，初始是/

主题/站点配置文件个性化修改

先更改能看懂的，如作者、头像、github/邮箱地址、评论、友情链接、打赏二维码、置顶、评论(gitalk)等，看不懂的先别改。

这里有个点，3-hexo有自己的语法高亮，因此需把hexo站点高亮关了

highlight:
  enable: false  #true改成false

文章分类 & md头部

写md时直接分类即可，另外3-hexo原生支持多级分类（在主题配置文件中有详细介绍），具体的md头部如下：

---

title: 剑指offer刷题
date: 2018-09-21 17:32:47
updated: 2020-02-19 14:36:48
categories:
    - 算法刷题
tags:
    - 剑指offer刷题
top: 1
originUrl: https://zhuanlan.zhihu.com/p/28987530

---

如果博文中有图片，就在csdn上编辑，得到图片网链，导出md后同步至mac md上，最后再从mac md源进行全网同步

有的主题首页只显示文章的简介(全文阅读)：在md文章中的合适位置添加 < !–more–> 标签即可，之前的文字都会写在首页文章名称下面的简介里

关于、相册等导航栏菜单建立

Hexo里，默认的导航菜单只有Home和Archives两项，还需自行添加其他导航栏菜单

hexo n page 'about'

这样就建立了source/about文件夹，然后在主题配置文件中：

menu:
  Home: /
  About: /about  #注意3-hexo主题这里需要改成hexoblog/about

在menu中加了一项设置About: /about，前面部分是显示名称，后面部分是访问路径，即source/about中的index.md，就是想要访问About时的页面。同理，还可添加别的菜单，如 Archives: /archives、Photo: /photo等

自定义域名

gitee pages 会自动生成hexo博客地址，可正常访问，如果有自定义域名需要则要进行如下操作。

阿里云购买域名、购买云解析dns服务，再购买免费的DVssl安全证书
在云解析dns服务中配置域名解析：添加CNAME，记录值为gitee.gitee.io
在本地hexo根目录的source文件夹中新建CNAME文件，里面写自定义的域名braincao.cn，然后hexo clean & hexo g & hexo d
在gitee的page service中添加自定义域名 braincao.cn，再把已买好的ssl证书上传，即可生成https://braincao.cn的博客地址

这样就可以通过自定义域名访问博客地址了，自定义域名的好处可以不透漏gitee项目地址，通过阿里云有负载均衡等付费服务，访问延时更低

备份博客

Hexo博客是静态托管的，所有的原始md博文都保存在本地，本地md文件如果丢失的话就四大皆空了，因此需要每次发布博文的同时在托管仓库进行md文件备份。

备份的好处有两个。首先，防止本地md丢失，留一份在远程；其次，如果换台电脑，可以从远程仓库将博客系统与原始md文件都clone到本地，这样可以随时随地无缝地写博客。

具体的备份思路为：

同一个hexo托管仓库，两个分支master、hexo
平时本地默认hexo分支，包含原始md博文、hexo系统
hexo站点配置中将deploy分支设置为master，将静态网页发布至origin/master
在本地bash中用配置alias：

function hexogdb() {
hexo clean && hexo g && hexo d && git add . && git commit -m "post new md" && git push && git pull

如此，当每次本地在hexo分支下写完md文件，直接 hexogdb 即可一键完成渲染、发布、备份。

其他备份方案：

使用 hexo-git-backup 插件备份Hexo博客
自行新建repo专门对本地md文件、hexo博客系统进行备份

恢复博客

如果本地md丢了、主题配置文件改错或换个台电脑后想要恢复博客，则：

本地安装git、node.js，安装hexo系统。能在cmd使用hexo即可
clone远程gitee中的hexo系统的repo，包含master与hexo两个分支
hexo分支包含主题配置与原始md文件，在该分支上继续写博客即可
配置git ssh key后正常发布博文即可

百度seo配置

想通过在百度等搜索引擎上搜索到自己博客，操作如下：

安装插件。npm install hexo-generator-sitemap –save
生成sitemap,xml。配置根目录_config.yml，配置后执行 hexo g，public目录中出现 sitemap.xml 文件则表明配置成功

#seo配置
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

sitemap提交、js代码自动推送双重方式向百度推送。在百度站点管理中链接提交界面中：上传sitemap、设置自动推送：

上传sitemap：百度定时抓取

自动推送：在HexoBlog/themes/3-hexo/layout/_partial/footer.ejs中添加百度官方js代码，这样渲染md文件后每个页面中都有该js代码，一旦该页面被访问过就会自动推送给百度

两种方式结合设置，这样博客不愁搜索不到了

我个人对baidu、google搜索到博客有太大需求，因此尝试后随即关闭sitemap，目前也搜索不到

完成

至此，已基本完成Hexo博客系统搭建，剩下需要做的就是内容产出了。每次产出md博文后，hexogdb 一键完成发布与备份。

本人做博客的初衷是沉淀技术知识、记录成长轨迹同时及时分享反馈。同样，每当入门一个全新的领域如能看到同行前辈分享的完整学习贴也会感激万分，这种正向反馈给我坚持技术分享的动力。技术之路无穷尽，希望在这条充满挑战的路上，我们都会收获属于自己的那份成就感。

欢迎转载，欢迎错误指正与技术交流，欢迎交友谈心