title: HEXO 建站指南
date: 2018-1-30 12:48:25
tags:
- hexo
categories:
- 其他
系统配置：Ubuntu
一、配置ssh
-
本地生成密钥对
ssh-keygen -t rsa -C "你的邮件地址"，注意命令中的大小写不要搞混。按提示指定保存文件夹，不设置密码。 - 添加公钥到Github
- 根据上一步的提示，找到公钥文件（默认为id_rsa.pub），用编辑器打开，全选并复制。
- 登录Github，右上角 头像 ->
Settings—>SSH keys—>Add SSHkey。把公钥粘贴到key中，填好title并点击 Add key。 - git bash中输入命令
ssh -T git@github.com，选yes，等待片刻可看到成功提示。
- 修改本地的ssh remote url，不用https协议，改用git协议
- Github仓库中获取ssh协议相应的url
- 本地仓库执行命令
git remote set-url origin SSH对应的url，配置完后可用git remote -v查看结果
这样git push或hexo d时不再需要输入账号密码。
二、环境准备
1. 安装node.js
下载源码，官网下载地址 ，选择source code下载即可，但是下载速度感人，这里贡献一下我的 百度网盘nodejs
-
环境配置
将源码解压之后 mv 到/usr/local/node (经过改名)，输入
gedit ~/.bashrc，在最后两行加上export NODE_HOME=/usr/local/node # 你的node安装目录 export PATH=$PATH:$NODE_HOME/bin -
检测
在bash下输入
source ~/.bashrc，之后输入node -v，如果显示你的node 版本则表示安装成功
2. 安装 HEXO
命令：
npm install hexo-cli -g
npm install hexo --save
三、开始搭建
1. 建立 your_name.github.io 仓库 和 blog仓库
将your_name改成你的github账号名字就行了
注：blog 是为了方便放博客
2. 博客初始化
-
将 blog clone下来
命令：
git clone git@github.com:your_name/blog.git -
cd 进去之后，初始化
hexo init npm install hexo g hexo s在浏览器中打开
http://localhost:4000/，你将会看到：hexo初体验
3. HEXO 详解
1. 常用命令
hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务，用于博客的预览
hexo deploy (hexo d) 部署播客到远端（比如github等平台）
-
hexo new (hexo n) 新建文章和页面
hexo new "postName" #新建文章 hexo new page "pageName" #新建页面
常用组合：
hexo d -g #生成部署
hexo s -g #生成预览
2. 发文章
-
直接创建
在 source/_posts/下新建一个
.md文件，头部加上类似以下内容（格式）--- title: hexo 建站指南 data: 2018-1-31 12:48:25 tags: - hexo categories: - 其他 --- -
命令方式
命令：
hexo new hello之后编辑 hello.md 即可
3. 新建标签页面
- 两个确认
- 确认站点配置文件有
tag_dir: tags
- 确认主题配置文件有
tags: tags
-
新建tags页面
hexo new page tags此时会在
source/下生成tags/index.md文件
- 修改 source/tags/index.md
title: tags
date: 2018-1-31 16:49:50
type: "tags" <!-- 必须 -->
comments: false <!-- 必须 -->
这里 date 会自动生成
-
在文章中添加tags
在文章
xx.md中添加：tags: - Tag1 - Tag2多个Tag可按上面的格式添加。
其文件头部类似：
title: date: 2018-1-31 10:44:25 tags: - Tag1 - Tag2
4. 新建目录页面
-
两个确认
- 确认站点配置文件打开了
category_dir: categories- 确认主题配置文件打开了
categories: /categories
-
新建categories文件
hexo new page categories此时会在
source目录下生成categories/index.md文件
-
修改categories/index.md
title: categories date: 2018-1-31 16:49:50 type: "categories" <!-- 必须 --> comments: false <!-- 必须 -->这里 date 会自动生成
-
在文章中添加categories
在文章xx.md中添加：
categories: - cate其文件头部类似：
title: TagEditText date: 2018-1-31 10:44:25 categories: - cate
5. 添加about页面
命令： hexo new page "about"
之后在\source\about\index.md目录下会生成一个index.md文件，打开输入个人信息即可
6. 添加搜索页面
注明：此处以next主题为例
命令：
npm install hexo-generator-search --save-
在博客根目录下的 _config.yml 中添加如下配置：
search: path: search.xml field: all-
path - file path. Default is
search.xml. - field - the search scope you want to search, you can chose:
- post (Default) - will only covers all the posts of your blog.
- page - will only covers all the pages of your blog.
- all - will covers all the posts and pages of your blog.
-
path - file path. Default is
更多配置说明可到插件页面查看：hexo-generator-search
-
在 themes/next/layout/_partials/search 目录下修改 localsearch.swig 文件
原始文件内容如下：
<script type="text/javascript"> var search_path = "<%= config.search.path %>"; if (search_path.length == 0) { search_path = "search.xml"; } var path = "<%= config.root %>" + search_path; searchFunc(path, 'local-search-input', 'local-search-result'); </script>修改后的文件内容为:
<div class="popup"> <span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input" placeholder="search my blog..."> <div id="local-search-result"></div> <span class="popup-btn-close">close</span> </div>注：部分主题中此处已经配置好了，无需更改
-
效果演示
主题： next
[站外图片上传中...(image-38e6a4-1525880166286)]
hexo-theme-next 本地搜索效果演示
4. 配置
1. 简单配置
网站的设置大部分都在 _config.yml 文件中，详细配置可以查看官方文档
下面只列出简单常用配置
- title -> 网站标题
- subtitle -> 网站副标题
- description -> 网站描述
- author -> 您的名字
- language -> 网站使用的语言
注意：进行配置时，需要在冒号:后加一个英文空格
2. deploy
输入命令： npm install hexo-deployer-git --save
在博客根目录下的_config.yml文件，末尾添加如下信息：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:your_name/your_name.github.io.git
branch: master
然后执行命令：
hexo g
hexo d
即可部署到github上
3. 添加评论功能
注册 Disqus 账号
-
配置 Disqus
登录后，点击首页的 GET STARTED 按钮，之后选择 I want to install Disqus on my site 选项，完成相关配置
Websit Name 就是 short name 自己填写，但是要求全网唯一，设定后不可改变，比如我的是 wangkunlin，这个在配置 Hexo 的时候需要用到
Category 选择种类，可以随便选
Language 语言选 Chinese 或者 English
然后点 Create Site 等待界面跳转
接下来在页面的左侧点击 Configure Disqus
在 Website URL 那里填写自己的博客地址，Description 可以不写，然后点 Complete Setup，Disqus 基本的设置已经完成
-
配置 HEXO
在博客根目录下的_config.yml 中添加如下信息：
Disqus disqus: enable: true shortname: your_count count: true -
修改相应文件
进入 theme 你的主题目录，找到 comment.ejs，我的是在blog/themes/next/layout/_partials/comments.swig，不同主题请自行查找，替换为下面的内容
注：部分主题无需修改，已修改好
<% if (page.comments){ %> <section id="comment"> <% if(config.disqus_shortname) { %> <div id="disqus_thread"> <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> <% } %> </section> <% } %>
5. 使用图床
博客中的图片文件可以直接放在source文件夹下，但是访问速度较慢，把图片放在国内的图床上是个更好的选择。
这里选用: 七牛云存储
免费用户实名审核之后，可以获取10GB永久免费存储空间、每月10GB下载流量、每月10万次Put请求、每月100万次Get请求，做图床绰绰有余。
注册账号，新建空间，我的新空间名是blog，专门用来放置博客上引用的资源。
进入空间后点击「内容管理」，再点击「上传」：
[图片上传失败...(image-864536-1525880166286)]
七牛空间没有文件夹的概念，但是允许为文件添加带斜杠/的前缀，用来给资源分类。这里我设置前缀为img/Hexo 3.1.1 静态博客搭建指南/。上传了一张图片：
[图片上传失败...(image-f2ba2c-1525880166286)]
在右侧可以找到外链，复制地址：
[图片上传失败...(image-558e6-1525880166286)]
Markdown 插入图片的语法为：
上传图片 -> 获取外链 -> 写入Markdown，就这么简单！
由于七牛防盗链的白名单无法添加localhost，暂时不设置防盗链，否则hexo s调试的时候，看不到图片。
以上操作每插入一张图片就要做一次，相当繁琐，于是写了个脚本简化，详见这篇文章《拖曳文件上传到七牛的Python脚本》
6. 更换主题
安装：在博客根目录下执行
git clone https://github.com/iissnan/hexo-theme-next.git themes/next，或者自行前往 github 上下载，然后mv至博客相关位置启用：修改博客根目录下的
_config.yml配置文件中的theme属性，将其设置为next-
修改 主题的_config.yml
-
修改 scheme
如：
# Schemes # scheme: Muse scheme: Mist # scheme: Pisces # scheme: Gemini
-
7. 绑定独立域名
- 购买域名
- 设置域名解析，添加一个 CNAME记录，指向你的github.io页面
- 在source目录下，添加CNAME文件（没有后缀）,在文件里面写上你的域名（只能写一个）
8. 设置阅读全文
效果请看 tofar
-
方法一：在文章中使用
< !--more-->手动进行截断这种方法可以根据文章的内容，自己在合适的位置添加
< !--more-->标签，使用灵活，也是Hexo推荐的方法。 -
方法二：在文章中的
front-matter中添加description提供文章摘录这种方式只会在首页列表中显示文章的摘要内容，进入文章详情后不会再显示。
-
自动形成摘要，在主题配置文件中添加
- 默认截取的长度为 150 字符，可以根据需要自行设定
auto_excerpt: enable: true length: 150
8. 字体配置
-
修改字体大小
文件位置：～blog/themes/next/source/css/_variables/base.styl
font-size-base = 16px -
配置文件位置：blog/themes/next/source/css/_variables/base.styl
// Font families. $font-family-chinese = -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "STHeiti", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Microsoft YaHei", source-han-sans-simplified-c $font-family-base = $font-family-chinese, sans-serif $font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global') $font-family-logo = $font-family-base $font-family-logo = get_font_family('logo'), $font-family-base if get_font_family('logo') $font-family-headings = $font-family-base $font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings') $font-family-posts = $font-family-base $font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts') $font-family-monospace = $font-family-chinese, monospace $font-family-monospace = Menlo, Monaco, Consolas, get_font_family('codes'), $font-family-chinese, monospace if get_font_family('codes') -
主题配置文件：blog/themes/next/_config.yml
font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default) # 亲测这个可用，如果不可用，自己搜索 [Google 字体 国内镜像]，找个能用的就行 host: https://fonts.cat.net # Global font settings used on <body> element. global: # external: true will load this font family from host. external: true family: Lato # Font settings for Headlines (h1, h2, h3, h4, h5, h6) # Fallback to `global` font settings. headings: external: true family: Roboto Slab # Font settings for posts # Fallback to `global` font settings. posts: external: true family: # Font settings for Logo # Fallback to `global` font settings. # The `size` option use `px` as unit logo: external: true family: size: # Font settings for <code> and code blocks. codes: external: true family: Roboto Mono size:
5. 更多配置
1. 更改上一篇，下一篇的顺序
进入一篇文章，在文章底部，有上下篇的链接（< >），但是点 > 发现进入的是页面中的的上面那篇文章，与操作习惯不符，别扭。
我猜这是从时间角度设计的，> 英语叫 next ，而 next 是更新的。不过别扭就改成习惯的好了，从空间位置角度设计。1
方法就是修改文件：
注意下面文件中的加减
文件位置：~/blog/themes/next/layout/_macro/post.swig
{% if not is_index and (post.prev or post.next) %}
<div class="post-nav">
<div class="post-nav-next post-nav-item">
- {% if post.next %}
+ {% if post.prev %}
- <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+ <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
- <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+ <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
</a>
{% endif %}
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
- {% if post.prev %}
+ {% if post.next %}
- <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+ <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
- {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+ {{ post.next.title }} <i class="fa fa-chevron-right"></i>
</a>
{% endif %}
</div>
</div>
{% endif %}
2. 移动端显示 back-to-top 按钮和侧栏
前提: 主题的设计模版是 Muse 或 Mist
文件位置：主题_config.yml
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: true
