Hexo博客搭建全面指南+基于NexT的优化

$Hexo$

而 $NexT$

因此本文选择了 $Hexo+NexT$

第一部分： $Hexo$

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。可以进入hexo官网进行详细查看（毕竟官方文档很有用），因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

第二部分：配置 $Hexo$

1. 安装 $Git$

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章，上传到GitHub的工具。

请到官网下载，然后打开 $Git Bash$

安装完成后，使用 git version 验证版本

2. 安装 $Node.JS$

Hexo基于Node.JS，因此需要安装Node.Js和npm工具。

选择 $LTS$

这样一来，就可以使用Git Bash来代替cmd了

3. 安装 $Hexo$

你需要在Git Bash中使用此命令安装Hexo

1	npm install -g hexo-cli

然后使用 hexo -v 查看版本验证安装

之后初始化Hexo并且创建存储博客本地文件的文件夹

1	hexo init myblog //初始化

处是你的博客本地文件夹的名字，写什么都可以

然后执行下面的命令
```bash
cd myblog   //进入这个myblog文件夹
npm install

注意这些命令只能一次输入一条。粘贴需要在Git Bash窗口右键

因为自带 $Landscape$

1 2	hexo generate //可以缩写成 hexo g hexo server //可以缩写成 hexo s

说一个小诀窍：你可以hexo g && hexo s，一步到位

4. 创建 $GitHub$

登录你的GitHub账号，创建一个新的仓库（没有账号的、不会创建的请自行BFS）

仓库名创建为 你的用户名.github.io，不然无法识别

选择Public

5. 生成 $SSH$

git config --global user.name yourname
git config --global user.email youremail
``` 
```yourname``` 就是你的GitHub用户名，```youremail``` 是你的GitHub的注册邮箱。这是Github用来验证账户的。

可以用下面的命令检查输入是否正确
```bash
git config user.name
git config user.email

接下来创建SSH，全部点回车就可以了

1	ssh-keygen -t rsa -C "youremail"

你会在大概会在C:\Users\Administrator中找到这个文件夹，用记事本打开。

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

而后在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key
把你的id_rsa.pub里面的信息复制进去。

用下面的代码验证 (无需改动)

1	ssh -T git@github.com

6. 将 $Hexo$

打开站点配置文件 _config.yml，翻到最后，修改YourgithubName为你的GitHub账户

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

安装 $deploy-git$

1	npm install hexo-deployer-git --save

然后执行

1
2
3

hexo clean      //清除之前生成的东西 缩写为hexo cl
hexo generate   //生成静态文章 缩写为hexo g
hexo deploy     //部署 缩写为hexo d

另外说一下，生成和部署可以合为 hexo g -d 。

现在，你可以打开 source\_posts，在里面创建Markdown文件，可以在里面写文章了！

第三部分： $Hexo$

1. 设置网站的基本框架

参数	描述	注释
`title`	网站标题
`subtitle`	网站副标题
`description`	网站描述
`author`	您的名字
`language`	语言
`timezone`	时区
`url`	网址	改成你的网站域名
`root`	网站根目录	不用修改
`permalink`	文章的永久链接格式
`permalink_defaults`	永久链接中各部分的默认值

2. Page（创建新页面）

1	hexo new page 页面名称

系统会自动给你在博客根目录下的 source 文件夹中生成一个新的文件夹，里面有一个 index.md，页面的编辑操作在此文件中进行。

3. Draft（草稿）

1	hexo new draft newpage

这样会在 source/_draft 中新建一个 newpage.md 文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用

1	hexo server --draft

在本地端口中开启服务预览。

如果你的草稿文件写完了，想要发表到post中，下面的代码就会自动把newpage.md发送到post中。

1	hexo publish draft newpage

第四部分： $Hexo$

1. 更换主题

在这里，窝推荐两款主题

$Shana$
$NexT$

由于我现在已经不用Shana主题了，所以用我正在用的NexT主题来说一下

NexT官方文档 NexT是有中文文档的。参照官方文档即可

下载主题

有两种方法下载NexT：使用git克隆最新版本和下载稳定版本的压缩包(.zip)

1	git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

提前声明一下：```站点配置文件```是你博客根目录下的```_config.yml```文件，```主题配置文件```是next主题文件夹下的```_config.yml```文件

打开 thmems\next，找到 站点配置文件 (_config.yml)。搜索找到 theme: 字段，把后面的 landscape 改成 next

1	theme: next

执行 hexo cl 清除缓存。之后执行 hexo s 便可以在 localhost:4000 中看到博客的预览效果了

其他内容

请自行阅读NexT官方文档

2. 添加 $RSS$

可以参照我的这篇文章

安装 $feed$

$Hexo$

1	npm install hexo-generator-feed

修改`站点配置文件`

## RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml

limit: 20

接下来直接执行hexo g就可以生成 $xml$

3. 绑定个人域名

首先你需要有一个域名

域名后缀看自己需求，.com属于比较贵的，因此选择近年来比较火的.top .xyz之类的

可以选择
万网
或者
西部数码
之类的

获取 $IP$

在此之前需要获取自己 GitHub 的二级域名的 IP 地址。Git Bash下ping自己博客的地址即可获得。

解析域名

在你购买网站的控制台中找到域名解析，将刚刚得到的 ip 地址填入后面的“对应值（或者叫记录值）”，选择A记录，其他不用动。
之后在主机名中分别填入 www 和 @。刷新一下，大概就成功了。

$GitHub$

进入仓库中，点击setting往下滑会看到custom domain

随后将自己购买的域名填写进去（不要加www之类的任何东西）

设置 $CNAME$

进入Hexo根目录下的 source 文件夹，添加一个CNAME。注意不要添加任何后缀名！

在里面填入你的域名。用记事本即可打开（当然VSCode也可以）

国内外分流

但是吧，这一点我并不会做，正在研究，过段时间会补上的。

BFS吧

第五部分： $Hexo$

1. $SEO$

首先需要让搜索引擎收录你的这个网站，别人才能搜索的到，那么这就需要SEO优化了

SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

百度SEO

登录百度站长平台，在站点管理中添加自己的网站。

验证方式选择 $HTML$

打开站点配置文件，添加以下两行，并把刚才的代码填在baidu那一行之后，注意与冒号之间要有空格。

1 2	google_site_verification: baidu-site-verification:

站点地图

首先安装插件

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

在站点配置文件添加以下代码

# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

~~不过有大佬说这可有可无~~

然后执行一下 hexo cl && hexo g，在 public 中找到 baidusitemap.xml 和 sitemap.xml，用VSCode的查找和替换功能，把所有的 http://yoursite.com/ 换成我们自己的域名。然后不需要generate，直接deploy就可以了。

百度主动提交

执行一下

1	npm install hexo-baidu-url-submit --save

然后在站点配置文件中插入，填入你的token

# Baidu主动推送
baidu_url_submit:
  count: 5 ## 提交最新的五个链接
  host:  ## 百度站长平台中注册的域名
  token:  ## 准入秘钥
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

token

随后在主题配置文件中搜索找到 baidu_push 段落，将其改为

1	baidu_push: true

之后在 themes\next\layout\_partials\head.swig 中搜索 baidu_site_verification

1
2
3

{% if theme.baidu_site_verification %}
  <meta name="baidu-site-verification" content="{{ theme.qihu_site_verification }}" />
{% endif %}

token

Google SEO

需要小梯子

首先选择资源类型，一般选择网页前缀

$Google$

posted @ 2020-09-08 12:07 WincerX 阅读(401) 评论(0) 收藏举报

刷新页面返回顶部

逝去的时光

Hexo博客搭建全面指南+基于NexT的优化

第一部分： $Hexo$

第二部分：配置 $Hexo$

1. 安装 $Git$

2. 安装 $Node.JS$

3. 安装 $Hexo$

4. 创建 $GitHub$

5. 生成 $SSH$

6. 将 $Hexo$

第三部分： $Hexo$

1. 设置网站的基本框架

2. Page（创建新页面）

3. Draft（草稿）

第四部分： $Hexo$

1. 更换主题

下载主题

启用主题

其他内容

2. 添加 $RSS$

安装 $feed$

修改`站点配置文件`

订阅

3. 绑定个人域名

首先你需要有一个域名

获取 $IP$

解析域名

$GitHub$

设置 $CNAME$

国内外分流

第五部分： $Hexo$

1. $SEO$

百度SEO

站点地图

百度主动提交

Google SEO

公告

逝去的时光

Hexo博客搭建全面指南+基于NexT的优化

第一部分： HexoHexo 简介

第二部分： 配置 HexoHexo

1. 安装 GitGit

2. 安装 Node.JSNode.JS

3. 安装 HexoHexo

4. 创建 GitHubGitHub个人仓库

5. 生成 SSHSSH 并添加到 GitHubGitHub

6. 将 HexoHexo 部署到

第三部分： HexoHexo 基本操作

1. 设置网站的基本框架

2. Page（创建新页面）

3. Draft（草稿）

第四部分： HexoHexo 优化

1. 更换主题

下载主题

启用主题

其他内容

2. 添加 RSSRSS 订阅功能

安装feedfeed插件

修改站点配置文件

订阅

3. 绑定个人域名

首先你需要有一个域名

获取 IPIP 地址

解析域名

GitHubGitHub 仓库的 custom domaincustom domain 绑定域名

设置 CNAMECNAME

国内外分流

第五部分： HexoHexo 功能

1. SEOSEO 优化

百度SEO

站点地图

百度主动提交

Google SEO

公告

第一部分： $Hexo$

第二部分：配置 $Hexo$

1. 安装 $Git$

2. 安装 $Node.JS$

3. 安装 $Hexo$

4. 创建 $GitHub$

5. 生成 $SSH$

6. 将 $Hexo$

第三部分： $Hexo$

第四部分： $Hexo$

2. 添加 $RSS$

安装 $feed$

修改`站点配置文件`

获取 $IP$

$GitHub$

设置 $CNAME$

第五部分： $Hexo$

1. $SEO$