Hexo+GitHub Pages搭建的个人博客

Posted 2020-10-07 枫小秋 的博客

1. 什么是 Hexo，什么是 NexT 主题？
Hexo 是一个基于 Node.js 的静态站点生成框架，快速、简洁且高效。Hexo 主要使用 Markdown 解析文章，在几秒内，即可利用靓丽的主题生成静态网页。NexT 是其一个非常简洁优雅的主题。

2. 什么是 Markdown？
Markdown 用过一些简单的标记，让你的文字实现精致的排版，实现易读易写，无需考虑美化，专注文字本身。

3. 什么是 GitHub ?
GitHub 是基于 Git 技术的社交编程及代码托管网站。你可以用它对你的项目进行版本控制，也可以浏览学习、参与开发别人的开源项目，甚至可以交友。

4. 如何把这些名词串联起来？

• 安装必要的软件后，使用 Hexo 创建你的本地博客，生成静态页面；
• 将静态页面托管到 GitHub 上，这样别人就可以通过公开网址访问你的博客了；
• 下载 NexT 主题美化你的博客样式。

安装 Git(基本使用教程自己寻找)

• Windows：下载后一路安装 git-for-windows（国内下载点）.
• Mac：使用 Homebrew, MacPorts ：
  $ brew install git
  或下载 安装程序 安装。
• Linux (Ubuntu, Debian)：
  $ sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：
  $ sudo yum install git-core

Hexo安装与配置

这篇教程是针对与Windows的。

1.

安装 Node.js

• Mac / Linux：使用 curl 或 wget 下载安装

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

重启终端并执行下列命令： $ nvm install stable

• Windows：下载后一路安装 Node.js

2.安装hexo

• 进入Git Bash,使用以下命令安装hexo($是提示符)

$ npm install hexo-cli -g
$ npm install hexo-deployer-git --save
$ hexo g
$ hexo d

如果网络很慢，可以执行以下命令

npm install -g cnpm --registry=https://registry.npm.taobao.orgc
cnpm install hexo-cli -g

3.创建博客目录

接下来创建放置博客文件的文件夹：yangql881012.github.io文件夹。我hexo文件夹的位置为E:\学习资料\97_github\yangql881012.github.io，名字和地方可以自由选择。之后进入文件夹，即E:\学习资料\97_github\yangql881012.github.io内，点击鼠标右键，选择Git Bash，执行以下命令，Hexo会自动在该文件夹下下载搭建网站所需的所有文件。

$ hexo init
$ npm install

注：npm install 安装依赖包
执行以下命令，相看相应效果

$ hexo g
$ hexo s

然后用浏览器访问http://localhost:4000/，此时，你应该看到了一个漂亮的博客了。

4.部署本地文件到github

既然Repository已经创建了，当然是先把博客放到Github上去看看效果。编辑E:\学习资料\97_github\yangql881012.github.io下的_config.yml文件，建议使用Notepad++。
在_config.yml最下方，添加如下配置(命令中的第一个yangql881012为Github的用户名,第二个yangql881012.github.io为之前New的Repository的名字,记得改成自己的。另外记得一点，hexo的配置文件中任何’:’后面都是带一个空格的),如果配置以下命令出现ERROR Deployer not found : github，则参考上文的解决方法。

deploy:
  type: git
  repository: http://github.com/yangql881012/yangql881012.github.io.git
  branch: master

配置好_config.yml并保存后，执行以下命令部署到Github上。

$ hexo g
$ hexo d

此时，我们的博客已经搭建起来，并发布到Github上了，在浏览器访问yangql881012.github.io就能看到自己的博客了。

5.hexo的配置文件

hexo里面有两个常用到的配置文件，分别是整个博客的配置文件E:\学习资料\97_github\yangql881012.github.io\_config.yml和主题的配置文件E:\学习资料\97_github\yangql881012.github.io\themes\next\_config.yml，此地址是对于我来说，hexo3.0使用的默认主题是landscape，因此你们的地址应该是E:\学习资料\97_github\yangql881012.github.io\themes\landscape\_config.yml，可在这两个文件里修改相应的配置信息。

• 博客配置文件 _config.yml
• 主题配置文件 _config.yml

6.发布一篇文章

• 在Git Bash执行命令：$ hexo new "my new post"
• 在E:\yangql881012.github.io\source_post中打开my-new-post.md，打开方式使用记事本或notepad++。

title: my new post #文章标题
date: 2016-11-12 22:56:29 #发表日期，一般不改动
categories: blog #文章文类
tags: [博客，文章] #文章标签，多于一项时用这种格式，只有一项时使用tags: blog
---
#这里是正文，用markdown写，你可以选择写一段显示在首页的简介后，加上
<!--more-->#在<!--more-->之前的内容会显示在首页，之后的内容会被隐藏，当游客点击Read more才能看到。

写完文章后，你可以使用以下命令：

• $ hexo g生成静态文件。
• $ hexo s在本地预览效果。
• hexo d同步到github
• 使用你的地址进行访问。

  hexo部署后，CNAME会被自动删除，怎么办？自己的独立域名需要用CNAME连接到github pages

  只需要将将需要上传至github的内容放在source文件夹，例如CNAME、favicon.ico、images等。

第3章 安装nexT

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

1.下载主题

• 打开 Git Bash
• cd E:\学习资料\97_github\yangql881012.github.io
• git clone https://github.com/iissnan/hexo-theme-next themes/next

2.启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

3.验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。 当命令行输出中提示出：
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

4.主题设定

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

• Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
• Mist - Muse 的紧凑版本，整洁有序的单栏外观
• Pisces - 双栏 Scheme，小家碧玉似的清新
  Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 即可。

#scheme: Muse
#scheme: Mist
scheme: Pisces

更多信息请见nexT官方文档

第四章 图片使用

1.首先确认_config.yml中有：###

post_asset_folder: true

2.然后在yangql881012.github.io/下执行

npm install https://github.com/CodeFalling/hexo-asset-image --save

3.确保在yangql881012.github.io/source/_posts下创建和md文件同名的目录，在里面放该md需要的图片，然后在md中插入

![](目录名/文件名.png)

即可在hexo generate时正确生成插入图片。比如：

    |- post1.md
    |_ post1
        |- pic1.png

在md文件中插入图片时只需写

![](post1/pic1.png)

首次配置完了需要执行一次清除操作，再生成页面：

$ hexo clean    
$ hexo generate     
$ hexo server

【源代码托管】

源代码用于生成静态页面，一直放在本地的话，用其他电脑就不方便修改了。所以可以源代码托管到 GitHub 上。网上将源代码托管到博客的 Repository 的新建分支中会出现主题文件夹无法同步的问题。这里采用新建 Repository 的方法实现源代码托管。

上传源代码到 GitHub

确认源代码下 .gitignore 内容：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

GitHub 上新建 hexo_blog 仓库，复制 Clone or download 下的在线地址。

git init
git remote add origin <server>  # hexo_blog 仓库的在线地址
git add . #添加 blog 目录下所有文件，注意有个‘.‘ ( .gitignore 里面声明的文件不在此内)
git commit -m "hexo source first add"  # 添加更新说明
git push -u origin master  # 推送更新到 git 上

这里有个坑需要注意一下，就是创建远程仓库的时候，如果你勾选了Initialize this repository with a README（就是创建仓库的时候自动给你创建一个README文件），那么到了第五个你将本地仓库内容推送到远程仓库的时候就会报一个failed to push some refs to https://github.com/guyibang/TEST2.git的错。

 这是由于你新创建的那个仓库里面的README文件不在本地仓库目录中，这时我们可以通过以下命令先将内容合并以下：

 

$ git pull --rebase origin master

这时你再push就能成功了。

 

下载源代码到另一台电脑

配置好 Git，SSH，初始化 Hexo 环境后，新建博客的本地文件夹：

git init  # 将目录添加到版本控制系统中
git remote add origin <server>  # 同上
git fetch --all  # 将 git 上所有文件拉取到本地
git reset --hard origin/master  # 强制将本地内容指向刚刚同步 git 云端内容

reset 对所拉取的文件不做任何处理，此处不用 pull 是因为本地尚有许多文件，使用 pull 会有一些版本冲突，解决起来也麻烦，而本地的文件都是初始化生成的文件，较拉取的库里面的文件而言基本无用，所以直接丢弃。

从 GitHub 仓库中更新源代码

git pull  # 更新源代码

【域名绑定】

购买域名

万网或其他平台。

域名解析

1. 进入工作台，点击域名，然后解析。

2. 第一次可能需要填写个人信息，填完了，点击上面的域名解析 -> 解析设置 -> 添加解析，记录类型选 A 或 CNAME， A 记录的记录值就是 ip 地址， GitHub 提供了两个 IP 地址， 192.30.252.153 和 192.30.252.154，随便填一个就行，解析记录设置两个 www 和不填，线路就默认就行了，CNAME 记录值填你的 Coding 的博客网址。

3. 如果选择 A 记录，就要在网站根目录新建 CNAME 文件，里面填写注册的域名，之后修改站点配置文件，把站点地址更新成新的绑定的域名即可。

【主题美化】

把侧边栏头像变成圆形，并且鼠标停留在上面发生旋转效果

修改 themes\next\source\css\_common\components\sidebar\sidebar-author.styl：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: site-author-image-border-color;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

为 NexT 主题的主页文章添加阴影效果

打开 themes/next/source/css/_custom/custom.styl 文件添加：

.post {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }

为 NexT 主题添加 canvas_nest 背景特效

打开 /next/_config.yml，修改 canvas_nest 参数：

# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

设置网站的图标Favicon

在 EasyIcon 中找一张（32*32）的 ico 图标,或者去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images 里，并且修改【主题配置文件】hexo_blog\themes\next\_config.yml：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

修改字体大小

打开 \themes\next\source\css\ _variables\base.styl 文件，将 $font-size-base 改成 16px，如下所示：

$font-size-base =16px

为NexT主题添加文章阅读量统计功能

为NexT主题添加文章阅读量统计功能

 

转自：

作者：戴戴Day
链接：http://www.jianshu.com/p/d34e9531cfce

作者：不圆的石头
链接：http://www.jianshu.com/p/c07ccdfba068