Hexo 搭建我的博客指南

时间  2021-08-14
标签 javascript css html java node git github web 算法 npm 栏目 JavaScript 繁體版
原文   原文链接

引言

人脑有限，对于同一个问题，也许当时花了许久时间解决了，然而过了一段时间，只留下一个印象，当再次须要解决时，仍是须要较长时间来寻找之前的资料。所以，在这里创建我的博客，一是为了整理记录，让本身省心；二是知识的分享，若是这里的信息刚好可以帮助你，我一样也会感到很是开心。javascript

其实在一年前我就尝试过使用 Hexo 和 Github Page 来搭建我的博客，可是当时主要是以为很炫，并无耐心把知识记录下来，所以，仅仅是搭了个框架，全站仅有一篇 Hello World 。近来从新捡起的时候，几乎全部的资料仍是得从新寻找，按照好几篇教程来搭建这篇博客，所以才有了前面的感慨。在这里，我将会把本身的折腾过程记录下来，而且将会随着本身博客设置的改变而不断更新...css

环境部署

首先，个人环境为：node: V11.2.0; npm: V6.4.1 git: V2.18.0; hexo: V3.8.0html

安装 Node.js

下载最新版 Node.js .java

安装选项默认便可。node

安装好以后，摁 Win+R 打开命令提示符，输入 node -v 和 npm -v ，若是出现版本号，那么就安装好了。git

安装 Git

为了把本地的网页文件上传至网上(github, coding 等)托管，咱们须要用到分布式版本控制工具—— Git .github

安装选项仍是默认，注意最后一步添加路径时选择 Use Git from the Windows Command Prompt ，这样咱们能够直接在命令提示符里打开 git 了。web

安装完成后在命令提示符中输入 git --version 验证是否安装成功。算法

注册 Github 帐号

打开 github.com ，新建一个项目，输入本身的项目名字，后面必定要加 .github.io 后缀，最好是你的 Github 帐号名(惟一)+.github.io ，以下图所示。npm

github.png

因为我已经用本身的名字注册过了，因此这里显示不可用。以后就能够经过 https://yourname.github.io 访问你建好的网站了。

注册 Coding 帐号

因为 github 的访问速度较慢，所以我将文件代码同时部署至 coding 上，打开 腾讯云开发者平台 ，新建一个项目，项目名称可一样设为 yourname ，以下图所示。

coding.png

以后第一次上传代码后，在代码下拉菜单中有个 Pages 服务 ，开启 静态 Pages 应用 ，便可经过 https://yourname.coding.me 访问你的网站内容。

安装 Hexo

在合适的地方新建一个文件夹，用来存放本身的博客文件，如 blog ，而后进入 blog 文件夹右击 Git Bash Here ，打开 git 的控制台窗口，以后咱们全部的操做都在 git 控制台中进行。

执行如何命令安装 Hexo：

sudo npm install -g hexo
复制代码

安装完后输入 hexo -v 验证是否安装成功。

而后初始化咱们的网站，执行 init 命令初始化 hexo，命令：

hexo init
复制代码

至此，主要安装工做已经完成！ blog 就是你的博客根目录，全部操做都在里面进行。

生成静态页面命令：

hexo generate
# 或者 hexo g
复制代码

启动本地服务，进行文章预览调试，本地启动命令：

hexo server
# 或者 hexo s
复制代码

而后在浏览器打开 http://localhost:4000/ ，就能够看到咱们的原始博客了，摁 ctrl+c 能够关闭本地服务器。

链接 Github、Coding 与本地

首先，安装 hexo-deployer-git 插件，右键打开 git bash，而后输入下面命令：

npm install hexo-deployer-git --save
复制代码

接着，添加 SSH key ，命令以下：

git config --global user.name "<your_name>"
git config --global user.email "<your_email>"
ssh-keygen -t rsa -C "<your_email>"
复制代码

其中 <youe_name> 和 <your_email> 根据你注册 github 的信息自行更改。

而后，打开 github ，在 settings 中点击 SSH and GPG keys ，新建一个 SSH，名字随意，好比 blog。复制密钥文件内容(路径形如C:\Users\Administrator\.ssh\id_rsa.pub)，粘贴至新建的 SSH 中。

测试是否添加成功，在命令行依次输入如下命令，返回 “You’ve successfully authenticated” 即成功。

ssh -T git@github.com
yes
复制代码

同理，打开 腾讯开发者平台 ，在 setting 中点击 SSH 公钥 ，新建一个 SSH，将以前的密钥内容添加进去。测试命令为：

ssh -T git@git.coding.net
yes
复制代码

最后，修改 _config.yml (在站点目录下)。在文件末尾修改成：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
 repo: git@github.com:<Github帐号名称>/<Github帐号名称>.github.io.git
 branch: master
- type: git
 repo: git@git.dev.tencent.com:<Coding帐号名称>/<Coding帐号名称>.git
 branch: master
复制代码

至此，环境部署已经完成。

写文章、发布文章

在博客根目录下右键打开 git，输入如下命令，新建一篇文章：

hexo new post "article_title"
# 或者 hexo n "article_title"
复制代码

而后在 ..\blog\source\_posts 目录中会发现你的文章文件，编写完 Markdown 文件后，输入 hexo g 生成静态网页，输入 hexo s 进行本地预览效果，最后部署至 github、coding 上，命令以下：

hexo deploy
# 或者 hexo d
复制代码

过一会打开你的 https://yourname.github.io 或 https://yourname.coding.me 就能看到你发布的文章了。

经常使用命令

hexo n "postName"	# 新建文章，文章路径为 source/_posts
hexo new draft "draftName"	# 新建草稿，不会发布至你的网站，文章路径为 source/_drafts
hexo new page "pageName"	# 新建页面，文章路径为 source
hexo publish draft "draftName"	# 将草稿进行发布
hexo clean	# 清除缓存，建议每次部署时先执行该命令，再生成静态页面
hexo g	# 生成静态页面至 public 目录
hexo s	# 开启预览访问端口(默认端口 4000，‘ctrl+c’ 关闭 server)
hexo d	# 将文件进行部署
hexo help	# 查看帮助
复制代码

绑定域名

尚未进行该步骤。

计划为：购买域名后，将国内流量解析至 https://kivenckl.coding.me ，而境外流量解析至 https://kivenckl.github.io 。

修改主题

选择本身喜欢的主题，详见： github.com/search?q=he…

应用主题：

  • 下载主题
  • 将下载好的主题文件夹，粘贴到站点目录的 themes 下
  • 更改站点配置文件 _config.yml 的 theme 字段，为主题文件夹的名称

例如，我选择的主题为 NexT ：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
复制代码

个性化设置

添加标签页面

生成 分类 页并添加 type 属性，进入博客所在文件夹，打开命令行，执行命令：

hexo new page categories
复制代码

成功以后，找到 /source/categories/index.md 文件，打开添加 type: “categories” ：

---
title: categories
date: 2018-12-02 10:56:16
type: "categories"
comments: false ---
复制代码

注：comments: false 可选

同理，生成 标签 页并添加 type 属性。

hexo new page tags
复制代码

成功以后，找到 /source/tags/index.md 文件，打开添加 type: “tags” ：

---
title: tags
date: 2018-12-02 10:55:56
type: "tags"
comments: false ---
复制代码

注：comments: false 可选

以后，就能够给文章添加分类和标签属性了。例如：

---
title: Markdown 中 LaTeX 数学公式命令
mathjax: true
abbrlink: 9a79e44d
date: 2018-11-27 13:46:17
categories: 笔记
tags:
 - Markdown
 - LaTeX
comments: true ---
复制代码

点击首页的 标签 或者是 分类 就能够看到对应标签下或分类下的全部文章。

设置文章模板

每次新建文章都会调用文章模板，其位于 scaffolds/post.md 文件，所以，咱们能够对其进行必要的修改，提供便利。例如，个人修改以下：

---
title: {{ title }}
date: {{ date }}
categories: 
tags: 
comments: true
mathjax: true ---
复制代码

其中 comments 用于控制是否开启评论，mathjax 用于控制是否公式的加载，对于不须要渲染公式的文章，关闭 mathjax 可提升页面的加载速度。

SEO优化

何为 SEO

搜索引擎优化（英语：search engine optimization，缩写为 SEO），是一种经过了解搜索引擎的运做规则来调整网站，以及提升目的网站在有关搜索引擎内排名的方式。因为很多研究发现，搜索引擎的用户每每只会留意搜索结果最前面的几个条目，因此很多网站都但愿经过各类形式来影响搜索引擎的排序，让本身的网站能够有优秀的搜索排名。当中尤以各类依靠广告维生的网站为甚。 所谓 “针对搜索引擎做最优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容作一些相关性的数据比对，而后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。搜索引擎优化就是经过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是作好用户体验。 对于任何一个网站来讲，要想在网站推广中获取成功，搜索引擎优化都是至为关键的一项任务。同时，随着搜索引擎不断变换它们的搜索排名算法规则，每次算法上的改变都会让一些排名很好的网站在一晚上之间名落孙山，而失去排名的直接后果就是失去了网站固有的可观访问流量。因此每次搜索引擎算演法的改变都会在网站之中引发不小的骚动和焦虑。能够说，搜索引擎优化是一个越来越复杂的任务。——维基百科

给站点添加 sitemap

首先须要安装两个插件来生成 sitemap 文件，前一个是传统的 sitemap，后一个是百度的 sitemap。

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
复制代码

而后须要修改站点配置文件 _config.yml ，配置 sitemap 插件。

Plugins: # 在该区域添加两个插件名称
 - hexo-generator-sitemap
 - hexo-generator-baidu-sitemap

# Sitemap
sitemap: 
 path: sitemap.xml

# baidusitemap
baidusitemap: 
 path: baidusitemap.xml
复制代码

安装完成后执行 hexo g 即会在站点 public 目录下生成 sitemap.xml 和 baidusitemap.xml 。

添加 robots.txt

在站点 source 文件夹下新建 robots.txt 文件，文件内容以下：

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories
Allow: /tags/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://kivenckl.github.io/sitemap.xml
Sitemap: https://kivenckl.github.io/baidusitemap.xml
Sitemap: http://kivenckl.coding.me/sitemap.xml
Sitemap: http://kivenckl.coding.me/baidusitemap.xml
复制代码

Allow 字段的值即为容许搜索引擎爬取的内容，能够对应到主题配置文件中的 menu 目录配置，若是菜单栏还有其余选项均可以按照格式自行添加。

须要将下方的域名改为本身的域名。

将网站连接提交至 Google

打开 Google Search Console ，添加博客地址。这里，我将 https://kivenckl.github.io 和 https://kivenckl.coding.me 两个域名都提交至 Google。

对于 NexT 主题而言，站点验证较为简单，选择 HTML 标记 的方法进行站点验证，打开主题配置文件 _config.yml ，找到 google_site_verification 字段，将标记代码中 content 部分代入，从新生成便可验证成功，对于 Baidu、Bing 验证同理。

而后提交 robots.txt 以及站点地图 sitemap.xml 、baidusitemap.xml ，验证无误便可。

以后就能够 google 搜索一下你的关键词和博客 title 测试一下了。

将网站连接提交至 Baidu 同理，因为百度不收录 https://kivenckl.github.io ，所以，我只将 https://kivenckl.coding.me 提交至百度。

最后，记得修改主题配置文件 _config.yml 中 baidu_push 字段，用于 Baidu 主动推送连接。

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
复制代码

修改文章连接

Hexo 默认的文章连接形式为 domain/year/month/day/postname ，当咱们把文章源文件名改掉以后，连接也会改变，很不友好，而且四级目录，不利于 SEO。

所以，使用 hexo-abbrlink 插件，生成文章的永久连接，后期不管怎么修改也不会改变该连接。

npm install hexo-abbrlink --save
复制代码

在站点配置文件 _config.yml 中修改：

permalink: post/:abbrlink.html
abbrlink: 
 alg: crc32 # 算法：crc16(default) and crc32
 rep: hex   # 进制：dec(default) and hex
复制代码

可选择模式有：

  • crc16 & hex
  • crc16 & dec
  • crc32 & hex
  • crc32 & dec

寻找图床

当向文章中添加图片时，若是图片来源于网络，那么还比较好办，直接引用那个连接便可，不过也有问题，那就是若是那个连接挂了那么你的图片也就没法显示。另外若是你的图片来源于本地，那么更麻烦了。一种作法是使用第三方服务器，好比七牛，当须要插入图片时，先把图片上传到七牛的服务器而后再使用，我以为很麻烦。这里选择另一种方法。

首先修改 _config.yml (在站点目录下) 中 post_asset_folder 字段：

# post_asset_folder: false
post_asset_folder: true
复制代码

当设置该字段为 true 时，在创建文件时，Hexo 会自动创建一个与文章同名的文件夹，你就能够把与该文章相关的全部资源都放到那个文件夹，这么一来，你就能够很方便的使用资源。例如，文章 post 须要插入图片 test.png 时，就可使用 [图片上传失败...(image-773548-1546505826136)] 。

问题是这样在本地显示没有问题，可是发布以后就没法显示，使用 hexo-asset-image 插件来解决。

在博客根目录右击打开 git bash ，执行如下命令：

npm install https://github.com/CodeFalling/hexo-asset-image --save
复制代码

从新生成以后就能够在你本身的网页上正常显示了。

对于由于 SEO 优化，使用 abbrlink 插件修改过文章连接的朋友而言，这种方法还须要进一步修改一下。因为原来的 permalink: :year/:month/:day/:title/ 变成了 permalink: post/:abbrlink.html 。打开博客根目录下 node_modules\hexo-asset-image\index.js ，增长一行命令，以下所示：

var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
    link = link.replace('.html', '/');	//新增长，针对修改后的 permalink
	var beginPos = getPosition(link, '/', 3) + 1;
复制代码

以后就能够正常显示了，仅供参考。对于修改为其余连接形式的朋友也有必定的参考意义。

公式支持

首先 Hexo 的自带的 Markdown 引擎并不支持 \LaTeX 公式，可是 MathJax 支持，所以首先要启用 MathJax 才能渲染 \LaTeX 公式。若是你已经安装了 NexT 主题，开启 MathJax 支持很是容易，在最新版的 NexT 主题的 _config.yml 文件里，找到 MathJax 相关部分，配置以下：

math:
 enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
 per_page: true

 engine: mathjax
  #engine: katex
复制代码

将 per_page 设为 true ，那么每篇文章均可以选择是否加载 MathJax ，从而提升不须要 MathJax 的文章的加载速度，文章的设置参见 设置文章模板 。

因为 Hexo 的渲染引擎 “hexo-renderer-marked” 与 MathJax 存在部分语义冲突，所以直接使用 \LaTeX 语法将会出错。解决方案这里提供两种。

更换 kramed 引擎

更换 Hexo 的 Markdown 渲染引擎， hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug，二者比较接近，也比较轻量级，替换命令以下：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
复制代码

更换引擎后行间公式能够正确渲染了，可是行内公式渲染仍是有问题。

接下来到博客根目录下，找到 node_modules\kramed\lib\rules\inline.js ，把 escape 变量和 em 变量的值作相应的修改：

// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
复制代码

更换 pandoc 引擎

hexo-renderer-pandoc 引擎十分靠谱，使用该 renderer 以前请确保你已经安装了 Pandoc ，而后卸载以前的 renderer ，安装 pandoc renderer：

npm uninstall hexo-renderer-marked --save
# 若是以前是 kramed 引擎，则 npm uninstall hexo-renderer-kramed --save
npm install hexo-renderer-pandoc --save
复制代码

注意，若是使用该引擎，那么书写 Markdown 时须要遵循 Pandoc 对 Markdown 的规定 。

有一些比较明显的须要注意的事项：正常的文字后面若是跟的是 list, table 或者 quotation，文字后面须要空一行，若是不空行，这些环境将不能被 Pandoc renderer 正常渲染。

另外，文中的 URL 使用 Pandoc 渲染之后是普通的文本格式，不能点击，能够经过用 <> 包围 URL 的方式把 URL 变成可点击的 URL。

在我使用该引擎时，发生没法渲染的错误，与 Pandoc 的 smart 参数有关，具体不是很清楚是什么缘由，在博客根目录中打开 node_modules\hexo-renderer-pandoc\index.js ，把 args 变量进行修改：

// var args = [ '-f', 'markdown-smart', '-t', 'html-smart', math]
  var args = [ '-f', 'markdown', '-t', 'html', math]
复制代码

以后就能够了，仅供参考。

关于如何在 Markdown 中使用 \LaTeX 公式，请参考 Markdown 中 LaTeX 数学公式命令 。

参考文献

  1. 【持续更新】最全 Hexo 博客搭建 + 主题优化 + 插件配置 + 经常使用操做 + 错误分析
  2. 超详细 Hexo+Github 博客搭建小白教程
  3. 在 Hexo 中渲染 MathJax 数学公式
  4. Hexo 书写 LaTeX 公式时的一些问题及解决方法
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程