一个行业的跌宕起伏

0%

博客搭建全攻略git+hexo

发表于 更新于 分类于 Valine：

博客折腾了好久，也看了好多贴子，稍微整理一个较全的给大家，可持续更新。
思路：还是用hexo吧，敲几行代码就可以搞定。如果使用各种客户端，总是会出现莫名其妙的错误，而且你也不知道哪错了。很是痛苦。
对一下软件版本号：hexo 4.2.0 ， Next 7.7.1 。

1、注册github博客空间

打开网址github.com，注册过程不表。成功后，点击右上角小+，新建一个库，英文“New repository”

库的名字，必须是“你的用户名.github.io”，这个名字千万不能错，每个库只能创建一个主页的库而且名字必须这样命名。如果成功，你打开这个库，看浏览器地址应该是：github.com/你的用户名/你的用户名.github.io

点击”settings”：

Repository name（库名），必须为：“你的用户名.github.io”

Custom domain ，如果你申请的有阿里云的域名，可以填进去，如果没有的话就算了。这一步完成后，所在的大项 GitHub Pages ，会告诉你博客的访问地址。类似于：http://你的用户名.github.io 或者你买的域名。就成功了。现在就可以按这个地址来访问。

2、申请域名（或可不用）

去阿里云自行购买即可。购买完成后，需要解析。登陆阿里云后，点击控制台。拉到中间，点击“域名”。
找到自己的域名后，点击右边的选项：解析
点击“添加记录”，注意不要选A记录，选CNAME记录就可以了。把“你的用户名.github.io”填进去就好
注：A记录一般是添加IP地址，除非你自己有服务器。你挂到github上，地址老变，你得老改，太麻烦了。

3、用git和hexo搭建博客

3.1 首先下载软件

A 下载git，即git bush

建议到[Git官网]下载最新版本 https://git-scm.com/
生成密钥：

1
ssh-keygen -t rsa –C "你的邮箱地址"   #生成密钥

之后会在C:\Users\你的管理员账户下，生成一个.ssh的文件夹，里面会生成id_rsa和id_rsa.pub两个文件。id_rsa是私钥（要保密），id_rsa.pub是公钥

B 安装hexo

可以在gitbush里： npm install -g hexo

C 初始化

Git是分布式版本控制系统，它需要跟你的github远程账号互动，有两种方式，我用的是SSH。

在电脑里建立好一个文件夹，这个文件夹里存放你的github内容。比如:”d:/github/myblog”
指定这个文件夹为库文件夹：

1
2
cd d:/github/myblog         #打开这个文件夹
git init  					#将这个文件夹初始化为库文件夹

完了会你的myblog会生成如下的文件夹：（解释每个文件夹啥意思）

1
2
3
4
5
6
7
8
-myblog
|-.git				#历史版本文件，这个不要去动
|-public			#这个文件夹所有的东西会被复制到远端
|-scaffolds			#这里面都是模板文件,优化博客的时候会用到
|-source			#包含了所有页面的文件夹
|-_post				#里面是博客文章，博客生成以后在这里修改
|-themes			#主题文件夹
_config.yml			#主配置文件

然后你执行：

1
hexo g

会生成你的静态页面，生成以后，执行

1
hexo s

开启本地预览，在浏览器里输入：http://localhost:4000/ 如果能看到一个模板页面，就说明成功了。

D 与github账户连接

首先打开id_rsa.pub，全选-复制一下。然后打开你的github账号，个人头像里的“settings” > ”SSH and GPG keys”选项 > 点击”New SSH Key”。把刚复制的粘进去。这样你如果本地修改好的文件，可以用“hexo d ”的命令同步到远端。

现在基本工作已经准备好了。证明环境已经搭好，但还不是一个真正的博客。

3.2 博客出世

A 选一个主题吧

“NEXT”目前是使用排名第一的主题先用这个。后期玩明白了再说换的事儿。定位到你的库文件夹下，然后在gitbush：

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

然后在themes下面会有一个next文件夹，这个就是你的主题了。下面要开始配置。打开库文件夹里的主配置文件_config.yml ，找到theme:

1
theme: next

然后找到 language：

1
language:  zh-CN     #主题文件夹下有个“zh-CN”文件夹，会显示页面目录的翻译

接下来大部分的配置都在next这里面设置

B 设置个性的目录

a 策划你自己的目录

默认的页面显然不能满足你的需求，比如我就想建个笔记页面，打开主题的配置文件_config.yml，找到menu

1
2
3
4
5
6
7
8
9
10
11
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || list-ol
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  biji: //categories/biji/ || pencil   #/biji/n1leader.html 这是单篇文章
  youji: //categories/youji/ || leaf

about前面打了#，说明我不想显示这个目录，现在看到的显示5个页面，最下面两个是我新增的biji和youji

比如#about: /about/ || user，格式为：“页面名称：/ 地址 || 图标名”

因为我们的博文是放在_post文件夹下的，所以假如你在里面新建一个biji的文件夹，地址就换成“biji/”

图标名指的是font-awesome图标名称，在https://www.bootcss.com/p/font-awesome/design.html 可以查找自己想要的图标，然后填在这里就好了

b 在主题里配置目录

目录设计好了，但是它显示出来就需要翻译了，next文件夹下的languages文件夹下面，打开“zh-CN”，找到menu：

1
2
3
4
5
6
menu:
  home: 首页
 ……
  biji: 想法
  youji: 游记
  ……

注意，home: 首页，格式是 “页面名称: 翻译”。所以我的笔记页面，显示的就是“想法”。

C 写文章和发布

在gitbush里，hexo new “yiciyouwan” ，文章名最好不要用中文，这样在外链的时候会转成特别长的码。这时你发现在_post下面，有一个文件”yiciyouwan.md”。可以用markdown编辑器编一下。（我用的是Typora）。找开这个文件后大概是这样的：

1
2
3
4
5
6
7
---
title: 可复制的领导力
date: 
tags: [领导力,读书笔记]
categories: biji
notshow: true
---

后几个是我加的，后面做优化的时候会用到。title里放的就是文章的标题。可以多整几篇文章。然后生成静态页面：

1
hexo g

如果没有报错error的话，基本上可以预览了： hexo s

这时候在本地预览里，可以看到新的页面。localhost:4000

此时可以发布了： hexo d 。100%完毕后，稍等几分钟，打开你的域名就可以看到博客了。

4、优化或调整

以上步骤完成后，基本上博客的初稿就完成了。但是离理想中的还有一些差距。后期还要不断进行优化。基本上就是文章的管理和页面的优化。

4.1 新建文章及分组

一个博客里有很多篇文章，按照上述方法，这些文章默认是放在主页的，但同时这些文章还应该分门别类进入子页面里。这里是应用hexo的分类功能。打开博客\scaffolds，里的post.md，增加categories: 

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
categories: 
---

这样，当你再用hexo new “文章名” 命令新建文章时，如果要把该文章放进biji(显示：想法)，那就打开“文章名.md”,在文件头找：

1
categories:  biji

与此同时，打开主题的主配置文件，找到menu

1
2
menu:
  biji: //categories/biji/ || pencil   #/biji/n1leader.html 这是单篇文章

biji的地址部分变成了：“/categories/biji/”，后面的biji就是你的标签名称，跟第二步对应。

你的新文章就放到biji中去了。在页面中显示是这样的：

4.2 设置文章不在首页显示

《我用的是新版next7.7.1主题》

1、在文章头新建一个变量：notshow。也可以在post(\scaffolds)模板中改，以后可以自动生成

1
2
3
4
---
title: 这是文章标题
notshow: true
---

2、在主题文件夹下，layout\index.swig，定位到post代码块：
增加一个if条件，有批注的两行是我修改的。

1
2
3
4
5
6
7
<div class="posts-expand">
  {%- for post in page.posts.toArray() %}
      {% if post.notshow != true  %} 	    #开始if
           {{ partial('_macro/post.swig', {post: post, is_index: true}) }}
      {% endif %} 						#结束if
  {%- endfor %}
</div>

注意，实际改的时候把注释去掉，否则“#开始if”会显示在你的页面最上方。

4.3 添加文章到某一个栏中

比如我要把某一篇文章加入到我的“笔记”这一栏里。

a 更改设置文件

你的主题文件夹下的 _config.yml 找到menu菜单

1
biji: //categories/biji/ || pencil

这句是我新增的，biji是我要加入栏目，把它的路径（原始/biji/）改成了“/categories/biji”。

然后在打开主题里你选择的语言文件，languages/zh-CN.yml ，找到”menu”，在下面增加一行：

1
biji: 笔记
b 加入分类categories
1
2
3
4
---
title: 你的文章标题
categories: 
---

也可以用更改post中的格式，加入这一行。

同样的，可以用相同的方法把文章加入到其它页面。

4.4 添加阅读与访问量统计

打开主题配置文件，搜索到 busuanzi_count: 更改 enable的值为: true。即可，页面上就会有小眼睛

1
2
busuanzi_count:
  enable: true

4.5 添加图片或视频

首先，要有博客文章文件名的同名文件夹。把图片或视频放到这个文件夹下面。
插入图片的格式：

1
{% asset_img 图片名称带格式 [图片描述] %}   #注意文字部分要替换成你自己的其它别动

插入视频的步骤，稍微复杂一点，需要下载插件：
首先需要下载插件

1
2
npm install hexo-tag-dplayer --save
npm install hexo-tag-aplayer --save

插入视频的代码为：

1
{% dplayer "url=视频地址" "api=http://dplayer.daoapp.io" "pic=图片地址" "id=9E2E3368B56CDBB4" "loop=no" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

5、更新及DeBug

5.1 每次要重设自义域名

每次更新以后你的自定义用户名可能点不进去。因为需要在你的github博客库（用户名.github.io）设置里，重新输入你的自定义域名。解决：

在你的source文件夹下，建议一个文件，名为“CNAME”无后缀

用记事本打开，输入你的自定义域名：比如我的就是nidebin.top 然后应用再更新即可

5.1 spawn failed解决办法

发生布署错误后，不要慌。执行下列命令：

1
2
3
git clean
hexo g
hexo d

5.3 load failed: hexo-leancloud-counter-security

hexo-leancloud-counter-security该插件加载错误
在hexo博客中hexo g 以后出现的：

ERROR Plugin load failed: hexo-leancloud-counter-security
Error: Cannot find module ‘babel-runtime/regenerator’
Require stack:
ERROR Plugin load failed: hexo-leancloud-counter-security

这就是包加载错误，简单来说就是下载的包有问题，修复一下。解决办法,（博客根目录中）在package.json中加入依赖label-runtime 的语句，【下面第二句】:

1
2
"dependencies": {
"babel-runtime": "^6.26.0",

然后运行git bush ,以修复package里的包们：

1
npm install --save

5.4 修改错误及版本回滚