欢迎来到Anderson_An的博客

🌵点此关注哟
众里寻他千百度，蓦然回首，那人却在灯火阑珊处

Github+hexo+next搭建教程

今天参考的是大神的教程，学了一个新东西，但是可能由于原教程中运用的npm包与我当前使用的npm包版本不同的原因，有出过多处运行错误，但都在此教程中解决了;

总结了下命令：

npm install hexo -g  全局安装

hexo -v  查看当前版本

hexo init 初始化

hexo install  安装组件

hexo g 生成加载页面

hexo s 开启服务 http://localhost:4000/ 

npm install --save hexo-deployer-git  部署git

hexo d 部署 hexo

前言

本次我会逐步演示如何在Github上搭建自己的静态博客，先看看我之前已经搭建好的博客效果：https://zouchanglin.github.io很多东西呢只是正对自己喜欢的风格来选择的，比如博客的风格，我自己比较喜欢Next主题的风格，Github上的项目地址是：https://github.com/iissnan/hexo-theme-next ，大家也可以根据自己喜欢的风格自行选择！

工具

markdown编辑器

由于我们写博客是需要使用markdown的语法的，一款好用的markdown文件编辑器必不可少，这个也是任凭大家自己选择，我个人比较喜欢使用Atom，这是一款跨平台的文本编辑器，用了一段时间感觉还不错。markdown语法很简单，在后面我会做一些简单的介绍。我也是最近才开始使用markdown来写博客，我以前是习惯在CSDN上写博客的，什么插入图片、插入代码、插入音乐、插入视频…之类的问题通通不用担心，这些坑我都踩过了，现在总结一下经验而已。Atom的下载地址：https://atom.io/ 安装过程很简单在此不赘述！

Git工具

这个不用说，提交代码必备，直接使用它的命令行工具就很OK，说到命令行大家也不用担心，常用的就那么几个，Git的下载地址：https://git-scm.com/download/win 安装过程很简单在此不赘述，安装完成后鼠标右键菜单就会多出两个选项：Git GUI Here 、Git Bash Here，其中Git Bash Here就可以在当前目录下打开Git的命令行！

Node.js

Node.js是一个Javascript运行环境,是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。hexo正是需要这个环境，所以安装安装Node.js是必不可少的，下载链接：http://nodejs.cn/download/ 安装过程也是非常简单，不在赘述！

注意：上面Git工具和Node.js环境是必须安装的，Atom只是一个方便于我们编辑md文件的工具，可以先不安装！

上述工具安装完成后，打开Windows的命令行，分别输入3个命令看看是否安装完成:
node -v 、npm -v 、git –version 出现版本号即说明安装完成！

Hexo

Hexo简介

hexo是个什么东西呢？总的来说就是把你的markdown文件转化为HTML静态页面的一种东西，浏览器是不会直接解析markdown文件的，所以我们需要把自己写的markdown文件先转化为HTML静态页面才能被浏览器解析，这个过程就需要Hexo来帮我们完成。更多内容请参考：http://coderunthings.com/2017/08/20/howhexoworks/ 这篇文章说的很详细！

安装过程

首先我们将本地的博客push到远程仓库中，本地博客得先有个存放位置，于是我们现在本地新建一个文件夹，名称随意(但是最好不要带中文和空格，对于一个程序员来讲，路径中包含中文或者空格简直是血的教训…)，我就在A盘下新建一个名称为hexo的文件夹

然后进入到刚刚新建的文件夹，右键Git Bash Here，输入npm install hexo -g，开始安装Hexo,安装完成后输入 hexo -v 查看版本，出现如图所示信息即使安装成功

完成上一步操作之后，我们需要初始化这个文件夹，输入hexo init 即可初始化该文件夹,可以看到初始化之后中文件夹中多出来了如此多的内容！

接着我们需要安装一些组件，输入命令hexo install

忙活了这么一大堆，现在该生成HTML静态资源文件了，输入命令hexo g完成页面的生成
我们先在本地看看效果吧，输入hexo s开始服务器，地址是http://localhost:4000/ ,然后打开浏览器就会出现我们的页面：

出现上面的页面就意味着我们成功了一半！

Githu博客仓库的建立

首先我们得申请一个Github账号，已有Github账号的跳过




此时需要我们认证一下邮箱的内容，我就直接在Android端认证了，出现Your email was verified.即是认证成功，在PC端登陆自己的Github的账号就OK了

接下来建立正式建立我们的博客仓库，点击Strat a Project即可

注意仓库名称一定是你的Github用户名.github.io才是可以的
注意仓库名称一定是你的Github用户名.github.io才是可以的
注意仓库名称一定是你的Github用户名.github.io才是可以的


如果在创建仓库的时候没有勾选创建一个README文件的话，就创建完成之后在创建一个就好了,点击README，之后点击Commit new File就OK了！

此刻在浏览器输入https://你的Github用户名.github.io/,应该就会看到你的Github主页，如果显示404NotFound之类的请配置一下profile即可,或者有一定延迟或者浏览器缓存，请在网络一切正常的情况下进行相关操作！

关联Github远程和本地仓库

Git个人信息

还是在博客根目录打开Git Bash Here

  • 设置Git的用户名和email：
1
2
 
git config --global user.name "你的Github用户名"
git config --global user.email "你注册Github使用的邮箱"
  • 生成ssh密钥

1
 
ssh-keygen -t rsa -C "你注册Github使用的邮箱"


找到刚才生成的ssh密匙文件，复制其中的全部内容

按照图片所示操作





出现上图即配置完毕

配置Deploy

在博客根目录下找到_config.yml文件中，找到deploy，修改为

1
2
3
4
 
deploy:
  type: git
  repo: repo: https://github.com/你的Github用户名/你的Github用户名.github.io.git
  branch: master

 

 

 

开始部署

当上述操作都完成之后，输入命令 hexo g 重新生成一下,然后使用命令hexo d 部署到Github远程仓库，这个时候一般会遇到一个问题：

这个时候我们需要执行一条命令

1
 
npm install --save hexo-deployer-git

 

 


出现上图则说明安装成功，接着我们就可以直接使用命令hexo d部署了，首次使用ssh密匙的时候，需要我们输入一个yes确认一下

接着输入一下我们之前设定的仓库密码就好了

接下来，看看我们部署的效果：https://你的Github用户名.github.io 由于我们还未安装自己的主题，所以看到的是hexo的默认主题，效果如下，如果暂时无法部署远程仓库的话就只能在本地使用hexo s开启服务器，然后访问http://localhost:4000/ 来查看效果!

 

安装主题

下载主题

这个主题大家可以自由选择，我个人比较推荐使用next主题，它的Github地址我已经子在前言中给出，选择Clone or download下载zip包即可，解压之后会获得一个叫做hexo-theme-next-master的文件夹，我们直接将文件夹重命名为next即可，然后将next文件夹copy到我们的博客根目录下

修改配置文件

博客根目录下，有一个_config.yml文件，修改其中的属性theme: next,注意”:”后面有一个空格，修改之后保存！

重新生成资源

使用命令 hexo g 生成静态资源，主要是指html文件

重新部署

使用命令 hexo d 重新部署到远程仓库，当然如果只是测试效果的话暂时其实没必要立马就部署到仓库，我们只需要 hexo s 开启本地服务器，然后访问http://localhost:4000/ 即可，然后就可以访问到修改过主题之后的效果



到这里主题已经全部安装完成，但是界面是不是太过于简约了？接下来说说如何使用这些配置文件使博客变得更加美观！

hexo命令总结

命令简写原始写法用途解释
hexo g hexo generate 生成静态资源，理解为生成静态网页即可
hexo d hexo deploy 部署到远程仓库,每次部署需要输入密码
hexo s hexo server 开启本地服务器，用于再无网络或者网速较慢的情况下快速查看博客效果
hexo new page “页面名” hexo n page “页面名” 匹配新菜单项的内容
hexo new “文章名称” hexo n “文章名称” 新建一篇文章

 

 

 

本地仓库配置文件与主题配置文件

本次仓库配置文件

博客根目录下，有一个_config.yml文件，打开之后我会做一个属性说明
我的配置文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

#博客名称
title: MyBlog
#副标题
subtitle: 一生只做浪漫极客
#简介
description: 发现累积的力量
#博客作者
author: Tim
#博客语言
language: zh-Hans
#时区
timezone: Asia/Shanghai<感谢姚栓同学的提醒，之前把Shanghai写成了Shanggai>

# URL
## 如果你的网站被放置在一个子目录中，将URL设置为“HTTP://YouSIT.COM/CHED”，并将根设置为“/CHOR/\”。
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 日期时间格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss


# 分页，每页文章数量
per_page: 10
pagination_dir: page


# 主题配置
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:LiLiLiLaLa/LiLiLiLaLa.github.io.git
  branch: master

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

需要修改的地方：博客名称、副标题、简介、博客作者、博客语言、时区、主题配置、Deployment(之前已经修

改好了)

主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
# 要显示的菜单：主页、关于、标签、分类、归档、日程、站内地图、公益404
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
# Schemes(自己选择一种排版风格，我比较喜欢Mist这种)
  #scheme: Muse
  scheme: Mist
  #scheme: Pisces
  #scheme: Gemini

 

 

 

 

 

 

 

 

 

 

额外说明

当上述步骤都完成之后，每次修改之后配置文件或者源文件的时候都需要使用hexo g命令重新生成静态资源，然后就可以在本地开启服务器进行预览

之后我们点击分别点击一下关于、标签、分类、日程，除了首页可以点击之外，其他的都会出现这样一个东西:Cannot GET /about/ 或者Cannot GET /categories/等等，这是由于我们没有在本地建立相关的静态文件导致的

还是在博客根目录下Git Bahs Here打开命令行，缺什么就新建什么，比如要新建关于、标签、分类、日程的页面

1
2
3
 
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

 

 

 


于是博客根目录下的source文件夹下就出现了about、tags、categories等文件夹，里分别有对应index.md文件

  • img文件夹是存放博客中图片的文件夹，这个稍后我会做出介绍
  • _ posts文件夹存放了我们写的博客，我们写的markdown文件就存放在此
  • 关于就是about里面的index.md文件了，这个版式比较随意，可以自己随便写一些自我介绍
  • 标签就是tags文件夹下的index.md文件，对于此文件我们需要做出如下修改

  • 分类就是categories里面的index.md文件，与tags相同，我们只需要把 type: “categories” 这一句加上即可

注意：对于此类菜单里的页面来说，我们只需要做出一次修改即可，一旦把文章类型(即type属性)申明为tags、categories…hexo就会帮我们自动填充内容，会根据你文章的变化一起变化，无需我们手动进行修改！

博文相关操作

新建文章

接下来还得说说新建文章，毕竟搭建好了博客，不就是要写点东西嘛！

1
 
hexo new "文章名"

 

 

新建好了之后，我们发现在source文件夹里面帮我们创建好了markdown文件，我们需要做的就是直接开始编辑markdown就好了，比如我新建了一个MyTestBlog
怎样对文章进行分类和添加标签呢？只需要做如下编辑

写的时候一定要注意格式，”:”后面都是有空格的

删除文章

这个没啥好说的，我们的所有文章都是放在source\_ posts\下面的，直接删除相应的markdown文件即可

编辑文章

基本语法

基本的markdown语法在这里不在赘述，基本语法请参照https://www.jianshu.com/p/0130ad32a08d 或者自行百度，很多博客都讲述了markdown的基本语法

插入图片

这个功能由于经常用到，我把它单独拿出来说一下，首先先在source文件夹下面新建一个文件夹用来存储图片，文件夹名称为img，其他名称也是可以的，然后将要插入的图片放在该文件夹下，命名不要太复杂,也不要有中文名称，比如将2018050899.png放进去，当我们需要插入图片的时候，只要按照如下写法就可以将图片插入了，在这里注意图片的书写路径，如果在本地预览的话需要写成这样的写法 (../img/2018050899.png) ，但是在服务器上的相对路径却不是这样，而是不需要上一级目录的标识，按照如下写法即可<感谢来自李仁单的建议>：

1
 
![图片无法正常显示的时候的说明文字](/img/2018050899.png)

 

 

插入代码

如果我们已知是什么语言的代码（比如Java），就写上Java ;如果不知道的话也可以不写

1
2
3
4
5
 
public class Demo{
      public static void main(String[]args){
          System.out.println("Test Code");
      }
}

 

主题配置优化

添加搜索功能

首先我们需要安装一个hexo-generator-searchdb

1
 
npm install hexo-generator-searchdb --save

 

 

修改本地配置文件，博客根目录下的_config.yml文件,如果没有就添加search属性并做如下配置:

search：
    path: search.xml
    field: post
    format: html
    limit: 10000

修改主题配置文件
我的路径：/博客根目录/themes/next下的_config.yml文件：

local_search:
    enable: true

注意:每个冒号后面都有空格。如果next主题在5.1.1以上的话就不用我这样设置，直接在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true就行了

首页显示文章摘要

这样可以在首页更快的找到最近的文章，不至于篇幅太长

标签图标修改

默认的标签无图标，是一个”#”，这个是可以修改的：
修改模板 /themes/next/layout/_ macro/post.swig，搜索 rel=”tag”>#，将 # 换成

隐藏powered By Hexo / 强力驱动

打开themes/next/layout/_ partials/footer.swig,使用””隐藏之间的代码即可，或者直接删除。

动态背景

直接在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true就行了

注意分号后面要加一个空格
Github的服务器离我们比较远，hexo d提交后可能没有立即看到效果，等待几分钟就好了，推荐方法是直接在本地预览，都修改好了再提交到Github服务器，有时候浏览器有缓存，需要多次刷新才可以看到效果！！！

结语

以上就是我的博客的搭建全过程，以后会增加留言或者评论的功能，现在只能这样了，我的过程也不一定适用于每一个人，可能会有很多隐藏的问题，

 

 

文章来源：https://zouchanglin.github.io

 

posted on 2018-11-15 13:31  Anderson_An  阅读(1083)  评论(0)  编辑  收藏  举报

导航