Hexo 自建博客教程
前言
Hexo 是一个轻量级、快速、简洁且高效的博客框架。Hexo 官网
基本使用
-
安装 Hexo
npm install -g hexo-cli -
新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
hexo init {folder} -
进入网站根目录
cd {folder} -
配置博客基本信息
打开根目录下的 _config.yml 文件，找到 Site 区域，这里可以配置网站的基本信息，我的配置如下，可参考：
# Site title: 博客 - 豆子 subtitle: '好记性不如烂笔头' description: 'Java, JavaScript' keywords: Java, JavaScript author: Ryan language: zh-CN timezone: 'Asia/Shanghai' -
下载依赖
npm install -
生成静态文件
hexo generate -
启动服务器。默认情况下，访问网址为： http://localhost:4000/。
hexo server -
打开浏览器，访问上面的网址
GitHub Pages 配置
GitHub Pages 允许每个账户创建一个名为 {username}.github.io 的仓库，它会自动为这个仓库分配一个 github.io 的二级域名，当然也可以自定义域名。
-
你需要有一个 Github 账号
-
给你的 Github 配置一个 ssh 连接
-
创建一个名为 {username}.github.io 的仓库
-
打开根目录下的 _config.yml 文件，找到 Deployment 区域，把刚才新建的仓库地址贴过来，注意是 SSH 地址，然后指定分支为 master 分支，可参考我的配置：
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: 'git' repo: git@github.com:mdz3201/mdz3201.github.io.git branch: master -
安装 hexo-deployer-git 插件
npm install --save hexo-deployer-git -
部署
hexo deploy最后会显示INFO Deploy done: git, 则表示部署成功，访问 GitHub 仓库同名的链接，比如我的是 https://mdz3201.github.io/ ，就能看到跟本地服务器同样的内容了 -
我们回到仓库，看看它给我们上传了什么文件上去，可以发现，就是 Public 文件夹下的静态文件，由此我们知道，我们每次在本地更新完之后，需要先生成静态文件，再部署到服务端
-
自定义域名
打开仓库设置，可以看到有一个 Github Pages 的选项卡，在 custom domain 的选项中输入你想自定义的域名地址，点击 save 即可 -
添加域名解析记录
-
部署的时候发现自定义的域名被清除了，那就手动添加 CNAME 文件，在 source 目录下新建一个 CNAME 文件，写上你的自定义域名，比如我的是
blog.douzi.work -
创建一个简易的部署脚本
每次输那么多命令太麻烦了，搞个脚本，在根目录下新建一个 deploy.sh 的文件，把我们部署要用的命令写进去，其中第一条是清除缓存，第二条生成静态文件，第三条部署hexo clean hexo generate hexo deploy发布时只需要执行
sh deploy.sh就行 -
我们已经知道，现在设置的 master 分支保存的是 public 文件夹下的静态文件，那么我源码放哪儿呢，新建一个分支
git init git checkout -b source git add -A git commit -m "init blog" git remote add origin git@github.com:{username}/{username}.github.io.git git push origin source
配置 NexT 主题
默认的主题实在是有点一言难尽，换个风格，目前最多人用的是 NexT 主题
-
进入到项目的根目录，执行如下命令下载 NexT 主题
git clone https://github.com/theme-next/hexo-theme-next themes/next -
修改项目根目录下 _config.yml 文件，找到 theme 字段，修改为 next ，如下：
theme: next -
重启本地服务，刷新页面
配置 NexT 主题，NexT 主题提供了一个名为 config.yml 的配置文件，在 themes/next 文件夹下，下述内容都是修改 themes/next/_config.yml 文件。
-
修改样式
scheme: Pisces -
修改图标
把需要修改的图标放到 themes/next/source/images 目录下，分别重命名为 favicon-16x16.ico 和 favicon-32x32.ico, 在配置文件中如下：favicon: small: /images/favicon-16x16.ico medium: /images/favicon-32x32.ico apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg刷新页面，查看配置是否生效
-
修改作者头像
把需要修改的头像放置到 themes/next/source/images 目录，重命名为 avatar.jpg, 配置如下：# Sidebar Avatar avatar: # Replace the default image and set the url here. url: /images/avatar.jpg # If true, the avatar will be dispalyed in circle. rounded: true # If true, the avatar will be rotated with the cursor. rotated: true其中，rounded 选项是否显示圆形，rotated 选项是否带有旋转效果。刷新页面，查看配置是否生效
-
回到顶部，配置如下：
back2top enable 是否启用 sidebar 如果设置为 true，按钮会出现在侧栏下方 scrollpercent 是否显示阅读百分比 -
GitHub_banner
# `Follow me on GitHub` banner in the top-right corner. github_banner: enable: true permalink: https://github.com/mdz3201 title: Ryan GitHub -
评论
由于 Hexo 的博客是静态博客，而且也没有连接数据库的功能，所以它的评论功能是不能自行集成的，但可以集成第三方的服务。这里选择 gitalk，它是利用 GitHub 的 Issue 来当评论。打开 GitHub new OAuth application 拿到 Client ID、Client Secret。进行配置如下：
comments: # Available values: tabs | buttons style: tabs # Choose a comment system to be displayed by default. # Available values: changyan | disqus | disqusjs | gitalk | livere | valine active: gitalkgitalk: enable: true github_id: mdz3201 # GitHub repo owner repo: mdz3201.github.io # Repository name to store issues client_id: {your client id} # GitHub Application Client ID client_secret: {your client secret} # GitHub Application Client Secret admin_user: mdz3201 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues distraction_free_mode: true # Facebook-like distraction free mode # Gitalk's display language depends on user's browser or system environment # If you want everyone visiting your site to see a uniform language, you can set a force language value # Available values: en | es-ES | fr | ru | zh-CN | zh-TW language: zh-CN
开始写文章
本章介绍如何用 Hexo 写文章
-
新建文章
hexo new hello-world -
文章头
--- title: 标题 # 自动创建 date: 日期 # 自动创建，如 2020-03-22 16:41:14 tags: - 标签1 - 标签2 - 标签3 categories: - 分类1 - 分类2 --- -
标签页/分类页
hexo new page tags--- title: tags date: 2020-03-22 16:45:07 type: tags comments: false ---hexo new page categories--- title: categories date: 2020-03-22 16:47:52 type: categories comments: false ---主题配置：
menu: home: / || home #about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat -
搜索，官方文档
npm install hexo-generator-searchdb --save在项目的 _config.yml 里面添加搜索设置:
search: path: search.xml field: post format: html limit: 10000在主题的 _config.yml 里面添加搜索设置:
# Local Search # Dependencies: https://github.com/theme-next/hexo-generator-searchdb local_search: enable: true # If auto, trigger search by changing input. # If manual, trigger search by pressing enter key or search button. trigger: auto # Show top n results per article, show all results by setting to -1 top_n_per_article: 5 # Unescape html strings to the readable one. unescape: false # Preload the search data when the page loads. preload: false -
404 页面，在根目录 source 文件夹新建一个 404.md 文件，内容参考：
--- title: 404 Not Found date: 2020-03-22 16:41:14 comments: false --- <center> 对不起，您所访问的页面不存在或者已删除。 您可以<a href="https://blog.douzi.work">点击此处</a>返回首页。 </center> <blockquote class="blockquote-center"> 豆子 </blockquote>
Hexo 扩展
本章主要讲讲 Hexo 的可扩展功能，目前我在用的有下面这五个，当然还可以探索更多的可玩性
不蒜子站点访问量统计
由于不蒜子是基于域名来进行统计计算的，所以通过 localhost:4000 端口访问的时候统计数据 PV 和 UV 都会异常的大，属于正常现象。
在 NexT 的配置文件中修改:
busuanzi_count:
enable: true
total_visitors: true # 访客数
total_visitors_icon: user
total_views: true # 访问量
total_views_icon: eye
post_views: false
post_views_icon: eye
刷新页面即可生效
站点运行时间统计
在 NexT 的自定义布局文件中添加如下代码，路径为 thems\next\layout_custom\custom.swig，若文件或文件夹不存在，则手动新建
{# 页脚站点运行时间统计 #} {% if theme.footer.ages.enable %}
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-precise-range-plugin@1.3.0/moment-precise-range.min.js"></script>
<script>
function timer() {
var ages = moment.preciseDiff(moment(),moment({{ theme.footer.ages.birthday }},"YYYYMMDD"));
ages = ages.replace(/years?/, "年");
ages = ages.replace(/months?/, "月");
ages = ages.replace(/days?/, "天");
ages = ages.replace(/hours?/, "小时");
ages = ages.replace(/minutes?/, "分");
ages = ages.replace(/seconds?/, "秒");
ages = ages.replace(/\d+/g, '<span style="color:{{ theme.footer.ages.color }}">$&</span>');
div.innerHTML = `{{ __('footer.age')}} ${ages}`;
}
var div = document.createElement("div");
//插入到copyright之后
var copyright = document.querySelector(".copyright");
document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
timer();
setInterval("timer()",1000)
</script>
{% endif %}
在布局页面中引入，路径为 themes\next\layout_layout.swig
{% include '_custom/custom.swig' %}
在 NexT 的配置文件中修改:
footer:
ages:
# site running time
enable: true
# birthday of your site
birthday: 20181001
# color of number
color: "#1890ff"
在语言文件中修改，路径为 themes\next\languages\zh-CN.yml
footer:
age: 博客已运行
刷新页面即可生效
abbrlink 永久短链
Hexo 自己生成的链接太长了，每次分享出去都很难看，而且还带中文
可以用 hexo-abbrlink 插件换成短链，安装
npm install hexo-abbrlink --save
修改根目录站点配置文件:
permalink: posts/:abbrlink.html
abbrlink:
alg: crc32 # cec16 and crc32
rep: hex # dec and hex
清缓存，重新生成发布看下效果:
豆瓣阅读/电影/游戏
安装
npm install hexo-douban --save
修改根目录站点配置文件,添加下面的代码:
douban:
user: # 个人豆瓣ID，登陆豆瓣后点击个人主页，此时 url 中最后一段即是用户 ID
builtin: false # 若为 true ，则每次 hexo server he hexo g 时都会去爬数据，会影响速度，如果豆瓣更新不是很频繁，建议设为 false，使用 hexo douban 手动更新
book: # 如果不想生成这个页面，注释掉即可，下同
title: "This is my book title"
quote: "This is my book quote"
movie:
title: "This is my movie title"
quote: "This is my movie quote"
game:
title: "This is my game title"
quote: "This is my game quote"
timeout: 10000
在 NexT 配置文件中更改菜单选项:
menu:
books: /books/ || book
movies: /movies/ || video-camera
games: /games/ || gamepad
在语言文件中修改，路径为 themes\next\languages\zh-CN.yml
menu:
movies: 电影
books: 读书
games: 游戏
生成页面:
hexo douban
浙公网安备 33010602011771号