从零开始搭建你自己的Hexo个人博客


1 前言

1.1 介绍

本文详细介绍了Hexo的从零开始搭建方法、主题配置、额外功能以及自己发现的一些小技巧等,未来也将不定时更新,旨在记录自己的探索过程,同时也希望能够帮到后来接触到Hexo的小伙伴。

1.2 碎碎念

前段时间重装了一下电脑,只备份了写过的博客,没有备份原来的配置,就是打算要更换一下主题。听说NextT主题非常火,可我看了下界面,并不是我的菜。经过一番挑选,就在要放弃更换主题、还是用原来的主题时,发现了Matery,各方面都完全符合我的审美(除了一些配色),于是迫不及待开始重新搭建我的Hexo博客——恰醋的小屋。

这篇博客也是我在本次配置过程中记录的,比之前写过的要详细一些,图片也很多,对于初学者来说应该很容易弄明白。

不少想要搭建博客的小伙伴可能也都和我一样,没有前端基础(到目前为止,我只学过C/C++和Python,C/C++也好久没写过代码了),所以大家都是跟着文档摸索着前进的,一篇篇文档、博客可能如同指引灯一般,引导着我们一步步满足自己的好奇心。

希望我的这篇博客也能发出微弱的烛光吧~

2 准备工作

2.1 安装配置node

前往Node.js官网下载nodejs安装包,不推荐下载最新版,因为我这里遇到了错误(但我并不确定是不是版本问题),换成了12.15.0版本的成功了。可以点击下面的阿里云镜像,去阿里云下载12.15.0版本,可以保证成功。

下载完成后开始安装,整个安装过程默认即可。为了避免之后出现不可预知的麻烦,我在这里选择自动安装需要的工具。如果你也这样选择,那么在nodejs安装完成后,会自动弹出cmd,随便按几个键后会弹出PowerShell,Chocolatey就会自动开始安装。等待一段时间,安装完成。

在cmd中输入npm -vnode -v以检测安装是否成功。

之后的博客部署过程中,我们将多次使用npm安装需要的模块,如果你在国内,那么使用默认源可能会比较慢,因此需要修改下载源。我本来打算使用中科大源,但是在几天前由于一些原因,中科大发布公告说无法再正常继续相关镜像的同步工作,只好作罢。现在网上我能找到的都是修改为淘宝源(https://registry.npm.taobao.org),于是也随波逐流了。

# 修改源
npm config set registry https://registry.npm.taobao.org
# 验证
npm config get registry

2.2 安装配置Git

如果用过github等,或许对这个并不陌生,

前往git官网下载相应操作系统的最新版本的安装包,我下载的是windows系统下的exe安装包。下载完成后开始安装。这个安装过程每个人可能都不一样,我简单贴一下我更改过的两个选项,未贴出的均为默认。

选择Git文件默认的编辑器,我选择VS Code,这个其实无所谓的,因为它很少用到,默认Vim也可以。

配置终端模拟器以与Git Bash一起使用。我这里完全可以使用Windows Terminal,而不使用Git Bash,因此修改了,如果你无法确定,那么就默认选择第一项。

安装完成后,可以输入git --version验证是否安装成功。

2.3 安装Hexo博客框架

在终端输入以下命令安装Hexo博客框架。

# 安装hexo框架
npm install hexo-cli -g
# 验证安装
hexo -v

至此,我们的准备工作已经完成,安装了nodejs和git两个工具以及hexo博客框架。

3 搭建最基础的博客

3.1 初始化博客

首先,我们需要一个文件夹来保存自己的博客网站信息,新建一个文件夹,然后在这里打开你想用的任何bash或shell(cmd, Git Bash, PowerShell, Windows Terminal等),输入hexo init进行初始化。初始化完成后,可以看到该文件夹下多出了许多文件。然后输入npm install自动安装一些需要的模块。

3.2 访问自己的博客

在初始化完成后,我们就可以使用hexo shexo server命令来访问自己的博客了。可以看到,它提示我们Hexo正运行在http://localhost:4000,我们通过浏览器访问该网页,就可以看到初始化的博客了。我就不放图了,留给你们自己去看吧。另外就是,初始会有一篇名为《Hello World》的博客,在这篇博客中可以看到hexo常用的四个命令及其用法。

一定要记得,此时不要关闭终端,当你访问完成后,先按‘Ctrl+C’结束,然后再退出终端。如果你已经关闭了,那么也不要紧,如果后面遇到了问题,最简单直接的方法就是重启一下电脑。你也可以自行查找如果关闭4000端口。

3.3 使用不同的主题

hexo默认的主题为landscape,如果不喜欢该主题,可以自行下载其他的主题。每个主题的使用方法都不尽相同,具体的要看主题作者给出的文档,建议新手找那些文档详细且还在更新的主题使用。下载相应的主题后,记得去hexo文件夹下找到_config.yml文件,修改theme参数为你使用的主题名。

当然,在你对hexo知之甚少的情况下贸然修改主题是会要人命的(Hexo: 气死你气死你气死你,略~​),所以你也可以选择先跳过这一步。

我最开始使用的主题为Ayer,目前使用的主题为matery,这两个主题都给出了十分详细的使用文档。

3.4 将博客部署到github上

尽管Github比较慢,但我建议新手还是尝试一下(实际上,就我最近的使用感受而言,github速度95%时间以上都是挺快的),因为Github比国内的Gitee、Coding等平台的都要好,即使你现在为了访问速度使用Gitee或Coding,之后大概率也会转回Github。当然,若你并不打算购买域名,为了提高访问速度还是使用Gitee或Coding吧。

3.4.1 新建仓库(repository)

登录自己的Github账号,新建一个仓库,命名为**你的账户名.github.io **(固定格式)。例如:假如你的账户名为 zhangsan,那么respository name就必须为 zhangsan.github.io。另外要注意,是账户名而不是昵称!账户名是你申请的时候输入的名字,也是你访问自己Github主页是url最后一级的显示。

3.4.2 使用Github Pages

新创建一个空项目后,点击Settings。

然后拉到最下面,可以看到一个Github Pages,点击Choose a theme,随便选择一个主题(反正之后也不会用),然后一路默认直到创建完成,此时你会发现多了一个_config.yml文件,README也发生了变化。

3.4.3 配置SSH key

要使用git工具首先要配置一下SSH Key。

如果以前使用过git,那么在“C://User/UserName/.ssh/id_rsa.pub”文件中存储着SSH Key。如果没有,就需要先在本机配置一下github账户。

git config --global user.name "用户名"
git config --global user.email "邮箱地址"

然后输入ssh-keygen -t rsa -C "邮箱地址"生成密钥SSH Key,根据提示按三次回车(即全部默认),就可以在id_rsa.pub文件中查看到自己的SSH Key了。

之后将ssh-key添加到ssh-agent: ssh-add ~/.ssh/id_rsa

输入cat ~/.ssh/id_rsa.pub,讲输出复制到剪切板,然后进入github官网,在你的头像下面点击Settings,在左侧栏可以找关键词SSH。点击New SSH key新建一个SSH,名字随便,内容就是你刚才复制的内容。

然后ssh -T git@github.com验证是否成功。出现“Hi UserName”字样即为成功。这里我踩了坑,如果用户名和你的电脑名一样的话,SSH无法正常使用,必须要修改一下主机名。

3.4.3 将博客上传到Github

在hexo文件夹下打开终端,输入以下命令安装git部署插件。

npm install hexo-deployer-git --save

中间可能会出现一些Warning,不必理会,只要最后成功安装了就行。然后打开_config.yml,在结尾找到deploy修改为如下(注意,每个冒号后面都必须跟一个空格,否则会出错):

deploy:
  type: git
  repo: 
    github: https://github.com/qiacu/qiacu.github.io
  branch: master

修改好后,就可以使用hexo ghexo d命令来将我们写的博客部署到github上面了。建议每次重新部署时按照一下步骤:

hexo clean
hexo g
hexo d

输出如下:

去Githu查看:

部署成功,访问http://UserName.github,io即可查看网页。如果用的是Gitee,还需要手动更新一下才能正常访问(之后每次修改后也都需要手动更新)。

剩下的就是简单修改一些_config.yml里面的东西,具体可以参考官方文档,这里不再详述。顺便说一句,对于新手来说,最好的教程就是官方文档。

4 提升博客的逼格

4.1 绑定域名

是否绑定域名由你自己选择,不是必须的。

4.1.1 申请域名

可以申请域名的平台有很多,我这里选择的是腾讯云。进入腾讯云官网,搜索关键词域名,点击域名注册。输入自己想要申请的域名查询是否被注册(图中最下面那个cn的已经被我注册了)。选中自己想要注册的域名,加入购物车后购买即可。

4.1.2 域名解析

购买成功后,进入域名管理控制台,此时在服务状态一栏你的显示可能是正在审核,一般几个小时后就可以正常了。

点击解析,添加两条记录:

4.1.3 域名绑定

打开Github的hexo项目,点击settings,拉到最下面的Custom domain处,填写上自己的域名,保存。(记得勾选HTTPS,否则后面打开你的网站会提示不安全)

成功后,在本地hexo根目录下进入source,创建一个名为CNAME的文件,使用记事本写入你的域名,保存即可。

4.1.4 配置SSL证书

进入SSL证书管理,点击提交资料。

跟着提示,一步步走下去,有哪里不懂的地方直接点进附近的链接查看文档。

4.2 SEO优化

如果没有任何配置,那么自己写的博客可能很难被百度、谷歌等搜索引擎搜到,因此需要我们将网站提交给百度和谷歌。

首先我们需要安装两个hexo插件:

npm install hexo-generator-sitemap --save		
npm install hexo-generator-baidu-sitemap --save

打开hexo根目录配置文件,写入以下内容:

sitemap:
	path: sitemap.xml
baidusitemap:
	path: baidusitemap.xml

重启 hexo,本地访问 localhost:4000/sitemap.xmllocalhost:4000/baidusitemap.xml,就能正确的展示出两个sitemap 文件了。

4.2.1 提交百度

进入百度站点管理,添加自己的网站。验证方式我选择的是添加html标签。

然后手动提交baidusitemap.xml。

在“抓取诊断”中手动抓取,然后Robots->检测并更新。

4.2.2 提交谷歌

GoogleSearchConsole → 站点地图 → 输入sitemap.xml → 提交。

4.3 打造免费图床

图片存储是写博客的一个大问题,如果只是本地浏览markdown文档,那么图片存在本地即可,可是要发布到网上,那么就要使用图床了。可是很多正规的图床都需要付费,而且构建也比较麻烦,这就让我们很头疼。我最开始使用过聚合图床,但是免费版有限制,有时候也会出现问题,而且安全性也无法保证。所以一个好的图床对我们来说是十分重要的。

在这里,本醋将使用Github+jsDelivr+PicGo+Imagine来构造一个快速、免费的图床。

4.3.1 Github生成token

新建一个Github仓库,名字随意,权限设置为public。然后点击用户头像进入Settings->Developer settings->Personal access tokens->Generate new token(右上角那个,而不是文中的链接)。note中输入备注,什么都可以,然后勾选repo。之后拉到最下面,generate token。

然后,会生成Token密钥,这个页面只会出现一次,所以最好把这个密钥记下来,一会儿要用。

4.3.2 配置PicGo并用jsdelivr作为CDN加速

前往下载PicGo,安装过程没什么好说的。

安装好之后打开,开始配置图床:图床设置->GitHub图床。

  • 设定仓库名:用户名/图床仓库名
  • 设定分支名:master
  • 设定Token:刚才的密钥
  • 指定存储路径:填写想要储存的路径,如img/,这样就会在仓库下创建一个名为img的文件夹,图片都会存储在此处
  • 设定自定义域名:https://cdn.jsdelivr.net/gh/用户名/图床仓库名

4.3.3 使用Imagine进行图片压缩(可选)

有时候,我们截取的图片都是比较大的,或者一篇博客中包含的图片比较多,这样网页加载就会比较慢。这时候我们可以使用Imagine对图片进行有损压缩。

4.3.4 上传图片到PicGo并使用图床

将Imagine压缩后的图片拖到PicGo的上传去,将会自动上传并复制访问链接,将链接粘贴到markdown文档中即可。

4.3.5 发现的问题

在CSDN中用markdown语法引用这些图片,有时候会失效?

解决方法:使用HTML插入图片即可。

4.4 添加天气

访问中国天气官网,点击自定义插件,推荐选择网页简约插件。创建后会有很多选项让你选择,十分详细,自己看着设置就好。设置好之后点击生成代码,将生成的代码复制到matery主题文件夹下的layout/about.ejs文件中,放在代码中不同的位置,最后在网页中显示的位置也不一样,可以自己摸索着来。

4.5 添加樱花雨效果

想象一下上面的樱花在不断下落~~

首先在主题目录下的/source/js下创建文件sakura.js,将该网址里面的内容复制进去即可。

然后在/layout/layout.ejs中添加以下内容:

<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

5 主题相关配置

该部分内容可能与你使用的主题有关,如果你使用的主题不支持,那么可能还需要你自己按照各个插件的官方文档一步步配置。以下内容均是以Matery主题为基础展开的。

4.1 Twikoo评论设置

我最初是想要使用Valine或者MiniValine来做评论系统的,但是不知道什么原因,在本地端口打开网页测试评论功能时一切正常,一旦部署到github pages后就失效了,无法正常访问leancloud。我不想太过麻烦,所以直接使用了twikoo评论系统。我使用的主题Matery也支持twikoo。

注意:Twikoo不兼容IE(但兼容Edge),介意的小伙伴勿选。

以下是我的配置过程,也可以参考官方文档

4.1.1 手动部署

进入腾讯云CloudBase,下拉到新用户专享部分,选择免费的基础版1即可(有钱的话当我没说),然后按照提示一步步购买。

购买成功后,进入环境->登录授权,开启匿名登陆。然后点击“自定义登录”一行中的“私钥下载”,下载该文件,一会儿要用。

进入环境->安全配置,将网站域名加入到“WEB安全域名”。如“qiacuhome.cn”。

进入云函数界面,新建云函数,函数名称填写twikoo,创建方式选空白函数,运行环境选Nodejs 10.15,函数内存选128MB,然后进入下一步。之后会看到一个输入框,清空里面的内容,填写以下代码:

exports.main = require('twikoo-func').main

创建完成后,点击“twikoo”进入云函数详情页,进入“函数代码”标签,新建文件,文件名为package.json,填写以下代码,点击保存并安装依赖

{ "dependencies": { "twikoo-func": "1.2.0" } }

4.1.2 管理面板配置

在环境->资源购买页面可以找到自己的环境ID,复制后填入Matery主题的_config.yml文件中。

然后重新hexo g -d,部署github pages。完成后,进入自己的网站,随便找到一个有评论框的页面进入,在右下角有一个设置,点进入,输入刚才下载的私钥,就可以进入管理界面了。按照提示修改配置即可。

4.2 哔哔功能

Matery主题支持哔哔功能(类似说说,但是不能评论,artitalk可以评论,但是在matery中它不是单独页面,我懒得去改就没用)。

4.2.1 创建LeanCloud应用

必须使用LeanCloud国际版。国际版和国内版就速度而言没有什么差异。然后点击左上角的创建应用,名字随意。

然后新建一个class,名字为content。

然后点击content这个class,添加列,名字为content,列类型为String,列注释随便写点什么就行。

4.2.2 创建哔哔页面

hexo new page bb

在pathtohexo/source/bb/下找到index.md,至少写入以下内容:

title: 恰醋说
layout: bb

4.2.3 关注公众号

微信搜索公众号黑石哔哔,关注后发送//leancloud:appid,masterkey,restapi即可绑定到leancloud,之后当你想要发什么说说时,只要发送给这个公众号即可。

其中,appid, masterkey获得方式如下图所示,restapi为https://appid前八位.api.lncldglobal.com

最后别忘记修改主题配置文件。


文章作者: 恰醋
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 恰醋 !
评论
  目录