my first 使用GitHub和Hexo搭建免费静态Blog

发表于 2018-02-11 更新于 2025-02-11

我的第一篇博客，也是我用Hexo不断添加新功能的流水账。

安装node

npm 国内镜像

npm config set registry https://registry.npmmirror.com

// 配置后可通过下面方式来验证是否成功
npm config get registry

//如果网络还有问题，继续根据你本机的情况设置代理
npm config set proxy=http://127.0.0.1:7890

安装命令行工具 hexo-cli

1 2	# 全局安装 hexo-cli $ npm install hexo-cli -g

hexo之hello world

# 创建一个基于 hexo 模板的新项目
$ hexo init blog
# 安装依赖，走你
$ cd blog
$ npm install
# 运行
$ hexo s --debug

写第一篇文章

1
2
3

# 创建一个基于 hexo 模板的新项目
$ hexo new "myfirst"
# 编辑 blog\source\_posts\myfirst.md

生成静态文件

1 2	# 同hexo generate，文件生成在publish目录里 $ hexo g

准备github pages

照着github pages上的向导，github上建一个项目(按照惯例名字用andych008.github.io)，同时也是blog的地址。
自定义域名

1 2	@ CNAME 默认 andych008.github.io http://catuncle.wang/ www CNAME 默认 andych008.github.io http://www.catuncle.wang/

别忘记在github上也要设置
只填catuncle.wang，没有前面的http

部署网站

准备

1
2
3

npm install hexo-deployer-git --save
git config --global user.name "喵叔catuncle"
git config --global user.email "andych008@163.com"

ssh key

1	ssh-keygen -t rsa -C "andych008@163.com" #生成ssh密钥文件

id_rsa.pub内容全部复制到GitHub_Settings_keys

Git Bash中检测GitHub公钥设置是否成功，输入 `ssh git@github.com`

修改_config.yml

deploy:
  type: git
  repo: https://github.com/andych008/andych008.github.io.git
  branch: master

部署

1 2	$ hexo c #即hexo clean $ hexo d -g #-g表示deploy前先generate

部署到多个站点(如:coding.net和github)

修改_config.yml

deploy:
  type: git
  repo:
    github: git@github.com:andych008/andych008.github.io.git,master
    coding: git@git.coding.net:dwgg/dwgg.coding.me.git,master
  name: 喵叔catuncle
  email: andych008@163.com

能否hexo deploy 时指定git账户
NoahDragon的说法正确，记得要rm -rf .deploy_git/然后清理、并重新部署

链接持久化

默认情况下hexo的生成的url地址是日期+md文件名的形式，如果url里有中文，看着不舒服，不方便分享。
还好hexo有很多现成的插件来帮我们解决这个问题：

npm install hexo-abbrlink --save

_config.yml里的配置:

# URL
#这里先注释掉旧的配置
#permalink: :year/:month/:day/:title/
#permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

修改scaffolds里的模版文件，修改post.md为:

---
title: {{ title }}
date: {{ date }}
comments: true
categories:
tags:
---

自定义favicon(以themes/landscape为例)

在https://realfavicongenerator.net上面生成favicon.ico文件
把favicon.ico文件放在themes/landscape/source/favicon.ico
修改themes/landscape/_config.yml:
1
favicon: /favicon.ico

定义CNAME(防止每次deploy后Custom domain被重置)

新建source/CNAME
CNAME文件内容为 : catuncle.wang

使用next主题

hexo-theme-next

tags需要手动生成
1. $ hexo new page tags，这时会生成sources/tags/index.md
2. 打开这个文件sources/tags/index.md编辑
  1
  2
  3
  4
  5
  ---
  title: tags
  date: 2016-11-11 21:40:58
  type: "tags"
  ---
3. 在主题配置文件中，在menu项下，要把tags页打开
  1
  2
  menu:
  tags: /tags

头像

# Sidebar Avatar
avatar:
  #必须是gif图
  url: /images/1075578.gif

favicon必须放在/images下

1
2
3

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png

开启Valine评论系统

# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid: xxx # your leancloud application appid
  appkey: xxx # your leancloud application appkey

如果哪天评论不能用了，很可能是30天内没有评论，leancloud自动关闭了存储服务。只需要在leancloud后台激活一下。

置顶

安装：

1 2	$ npm uninstall hexo-generator-index --save $ npm install hexo-generator-index-pin-top --save

配置：打开/themes/next/layout/_macro/post.swig，定位到<div class="post-meta">标签下，插入

{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

使用：top: true

---
title: Android版本及别名
tags:
  - android
abbrlink: 7504d8c
date: 2018-09-19 15:05:09
top: true
---

阅读全文 »

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

常用命令

npm list -g --depth=0 
npm -g  uninstall github-todos
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
npm install hexo-cli -g #再次执行，会升级hexo-cli
npm update #在博客目录执行，会升级hexo的版本
hexo version #查看hexo相关的版本信息