使用hexo+github搭建blog

发表于 2021-09-05 更新于 2023-03-02 Disqus：

环境搭建

配置Github

安装Git

下载Git ,选择自己合适的版本。我是在windows下搭建的，所以我选的是windows
安装完成后，在开始菜单里找到”Git”->”Git Bash”，弹出命令行窗口，就说明安装成功

配置ssh

设置用户名

1 2	$ git config --global user.name "Your Name" $ git config --global user.email "email@example.com"

因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址。你也许会担心，如果有人故意冒充别人怎么办？这个不必担心，首先我们相信大家都是善良无知的群众，其次，真的有冒充的也是有办法可查的。
注意git config命令的--global参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。

查看密钥
cd ~/.ssh如果没有，则不会有此文件夹，有的话则备份删除

生成密钥
$ ssh-keygen -t rsa -C "email@example.com" 按3个回车，密码为空。
最后得到了两个文件：id_rsa和id_rsa.pub

添加密钥到ssh-agent(如果报错, 尝试执行eval `ssh-agent -s` 后, 再执行下面的命令) $ ssh-add ~/.ssh/id_rsa


登录Github，添加ssh
把id_rsa.pub文件里的内容复制到Github中的ssh keys中

测试
$ ssh -T git@github.com选择yes，就可以看到你的用户名，则说明配置成功

创建Repository

注 :Repository name为 用户名.github.io
我已经创建了，所以会有错误的提示。
配置hexo
hexo是一款基于Node.js的静态博客框架。
Node.js
安装Node.js。去官网上下载，直接安装就可以。
NPM(Node Package Manager) 是Node.js的包管理器，Node.js中的带有NPM。
Hexo
创建Hexo 项目
控制台命令
1
npm install hexo-cli -g

查看Hexo版本
1
hexo version 

创建项目(blog)
1
hexo init blog

进入项目
1
cd blog

安装依赖包(任何一个项目都要在项目目录下安装依赖包)
1
npm install

启动项目
1
hexo server



目录结构如下
1
2
3
4
5
6
7
8
9
10
11
.
|─── .deploy       #需要部署的文件
|─── node_modules  #Hexo插件
|─── public        #生成的静态网页文件
|─── scaffolds     #模板
|─── source        #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里
|   |─── _drafts   #草稿
|   |─── _posts    #文章
|─── themes        #主题
|─── _config.yml   #全局配置文件
|─── package.json

用浏览器打开http://localhost:4000/ 或者 http://127.0.0.1:4000/ 就可以看到网页。
如果可以访问这个网页，就说明hexo搭建成功。
hexo常用命令
1
2
3
4
5
6
7
8
hexo init [folder] #新建一个网站，如果没有设置folder，hexo默认在目前的文件夹建立网站
hexo new [layout] <title> #新建一篇文章。如果没有设置layout的话，默认使用 _config.yml 中的default_layout参数代替，默认为post。
hexo generate #生成静态文件。参数-d(--deploy文件生成后立即部署网站)、-w(--watch监视文件变动)
hexo publish [layout] <filename> #发布草稿
hexo server #启动服务器。参数-p(--port 重设端口)、-s(--static 只使用静态文件)、-l(--log 启动日志记录，或者覆盖格式记录)
hexo deploy #部署网站。参数 -g(--generate 部署网站之前，需要预先生成静态文件)
hexo clean #清除缓存文件(db.json)和已生成的静态文件(public)
hexo list <type> #列出网站资料


关于hexo new [layout] <title> 中的layout
hexo有三种默认布局post,page和draft,它们分别对应不同的路径而您自定义的其他布局和post 相同,都将储存到source/_posts 文件夹.

定制Hexo
Hexo 有两份主要的配置文件（_config.yml），一份位于站点根目录下，另一份位于主题目录下。
为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。
注意：配置文件中的冒号”:”后面至少有一个空格,否则会报错.YAML语法
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site

title: ShareKnowledge  #标题
subtitle: #副标题
description: 船头爱茶包......有人爱茶包 #描述
author: ShareKl #作者
language: zh-Hans #语言 汉语
timezone:
# header
avatar: /head.jpg #头像信息 ，images 在source目录下

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
## url 在本地测试时，可以为空
url: http://sharekl.github.io/
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: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Archives
##2: 开启分页
##1: 禁用分页
##0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

#下文详细解释 拓展插件、社交系统和主题设置
# Extensions 拓展插件 
##duoshuo_shortname  多说插件
duoshuo_shortname: xxxxxxxxxxxxxxxxxxx
##baidu_analytics  百度统计
baidu_analytics: xxxxxxxxxxxxxxxxxxx
##swiftype_key 搜索
swiftype_key: xxxxxxxxxxxxxxxxxxx
## Social links 社交系统
social:
  github:
   href: https://github.com/ShareKl
   img: /logo/github.png
  douban: 
    href: http://www.douban.com/people/sharekl/
    img: /logo/douban.png
  weibo: 
   href: http://weibo.com/shareklg
   img: /logo/sinaweibo.png
   
 
## Plugins: http://hexo.io/plugins/
plugins:
- hexo-generator-feed
## Themes: http://hexo.io/themes/
theme: next  ##主题设置 



## title, chinese available
##links_title: Links
## links
##links:
## MacTalk: http://macshuo.com/


#此部分只是用来部署的，在本地测试无需修改
# Deployment 将ShaerKl换成自己的github的用户名
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/ShareKl/ShareKl.github.io.git
  branch: master

修改主题
我用的是NexT主题。NexT帮助
下载主题
使用Git终端在终端窗口下，定位到 Hexo 站点目录下
1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next


启用NexT主题
克隆/下载 完成后，打开 站点配置文件，找到 theme 字段，并将其值更改为 next
主题设定
选择Scheme
NexT 通过 Scheme 提供主题中的主题。 Mist 是 NexT 的第一款 Scheme。启用 Mist 仅需在 主题配置文件 中将 #scheme: Mist 前面的 # 注释去掉即可。
语言设置
编辑站点配置文件，将 language 设置成你所需要的语言
language: zh-Hans
头像设置
编辑 站点配置文件，新增字段 avatar， 值设置成头像的链接地址。
头像设置示例：
 avatar: http://sharekl.github.io/head.jpg 
 avatar: /avatar.jpg 
拓展插件
多说评论系统

登录后在首页选择 “我要安装”。
创建站点，填写站点相关信息。多说域名 这一栏填写的即是你的 duoshuo_shortname，如图：

创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段，值设置成上一步中的值。

百度统计

登录 百度统计，定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id，如：

编辑站点配置文件，新增字段 baidu_analytics 字段，值设置成你的百度统计脚本 id。

Swiftype 搜索

前往 Swiftype 注册页面，注册一个新账户。
注册完成后，创建一个新的搜索引擎，并按照提示完成创建步骤。
搜索引擎创建完成后，在菜单中选择 Integrate -> Install Search 开启搜索定制，安装步骤完成定制。最后一步记得点击 Active 按钮。
返回定制引擎的第二个步骤 INSTALL CODE，复制出你的 swiftype_key。

编辑站点配置文件，新增字段 swiftype_key，值设置成第四步中赋值出来的 key

Social links 社交系统
原主题的社交系统是不同于我这个社交系统的。原主题网站   我的博客网站
所以要修改主题的布局文件，
1
2
3
4
5
6
7
8
9
10
social:
  github:
   href: https://github.com/ShareKl
   img: /logo/github.png
  douban: 
    href: http://www.douban.com/people/sharekl/
    img: /logo/douban.png
  weibo: 
   href: http://weibo.com/shareklg
   img: /logo/sinaweibo.png

修改themes\next\layout_macro\sidebar.swig
1
2
原67行<a href="{{ link }}" target="_blank">{{ name }}</a>
修改为<a href="{{ link.href }}" target="_blank" style="border-bottom: 0px"><img src="{{ link.img }}"></img></a>


部署Hexo到Git
编辑站点配置文件,把deploy信息配置好
1
2
3
4
deploy:
  type: git
  repo: https://github.com/ShareKl/ShareKl.github.io.git
  branch: master

ShareKl 为自己的用户名
1
2
3
hexo clean #先清空下文件
hexo generate #再生成
hexo d #部署



错误及解决办法
hexo ERROR Deployer not found: github
1
2
3
4
deploy:
  type: github
  repo: https://github.com/ShareKl/ShareKl.github.io.git
  branch: master

type: github 部署不成功的话，安装npm install hexo-deployer-git --save
然后将deploy的type由github修改为git
执行hexo d 报错Error: spawn git ENOENT
1
2
3
4
5
Error: spawn git ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
    at child_process.js:1144:20
    at process._tickCallback (node.js:355:11)

解决方法
添加环境变量：C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\libexec\git-core，这样就解决了问题了。
高阶设置
SEO优化



    
    
    

    
          
  欢迎关注我的其它发布渠道

  

      
          
            
              
            

            Twitter
          
      
  


          
              # blog搭建
          

        

          
            
            
            
                
                  Windows 安装 OpenSSH