Hexo 博客搭建:基础篇
Hexo 是一款基于node.js 的静态博库框架,而且可以方便的托管在Github 上, 这里简单记录一下Hexo 的安装配置过程。
本篇博客算是Hexo博客搭建的第一篇文章,以后会陆续写几篇优化的文章。
# 从0到1,快速搭建hexo博客
# 下载node.js
官网下载LTS版本,直接安装。Hexo 是依赖于Node.js 和 git 工具,我们首先需要安装node.js ,然后利用npm去安装一些必要的插件。
# 安装hexo
注意:切换为 root 账号操作,切换淘宝源 cnpm,会更加快npm的速度
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装hexo cnpm install hexo-cli -g
安装完后用hexo -v
查看一下是否安装成功
# 启动hexo
在目录下创建 blog 文件夹 mkdir blog
,进入 cd blog
初始化hexo
hexo init
出现 INFO Start blogging with Hexo!
表示安装完成
启动hexo
本地启动的博客会在localhost:4000
中启动,用户在本地是找不到相对应的Web资源目录。markdown文件修改完后即会调用hexo中的引擎自动渲染。
hexo server/s
清空hexo
hexo
生成hexo
这一步会生成对应public
文件夹,其中包含了页面对应的HTML文件,未来我们部署到服务器上看到的就是public
文件夹中的内容。
hexo generate / hexo g
# 第一篇博客
hexo new post 'my first blog'
该命令会在 /Users/YourUserName/blog/source/_posts/
文件夹下生成对应的 md文件
模板文件在./scaffolds/post.md
中找到。
# Github Page 部署
传统的博客搭建成本非常高,因为我们需要自己租用服务器,购买域名。现在我们可以将我们的代码托管到github仓库中,并利用Github Page 作为我们博客的页面(同样Github也提供了对应的域名)
# 第一步:新建仓库
名字必须为自己的用户名+.github.io
如 PPsteven.github.io
# 第二步:安装git 插件
git 插件可以帮助我们方便的把我们的修改提交到我们的仓库中,是一个很方便的插件。
cnpm install --save hexo-deployer-git
# 第三步:在配置文件中添加仓库信息
在配置文件_config.yml
中找到如下代码,添加repo 信息和 branch 信息
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/PPsteven/PPsteven.github.io.git # github 仓库地址
branch: master # 提交到的分支
2
3
4
5
6
# 第四步:部署hexo
hexo clean #会清除缓存文件db.json及之前生成的静态文件夹public;
hexo g #会重新生成静态文件夹public;
hexo deploy/ hexo d #因为之前已经安装了插件并且在博客配置文件中也配置好了,所以这个命令会在博客根目录下生成一个.deploy_git的文件夹,并 把本地生成的静态文件部署到LiLei.github.io这个仓库中的master分支上;
2
3
如果是第一次部署,会提示输入github 账号和密码
成功!!
远端访问:PPsteven.github.io
# Hexo CheetSheet
初始化目录:
hexo init [folder]
新建文章:
hexo new/n [layout] <title>
或- 新建草稿:
hexo new draft <title>
- 新建页面:
hexo new page tags
- 新建草稿:
将草稿发布为正式文章:
hexo publish <title>
生成静态文件:
hexo generate/g
- 监听文件变化:
hexo g --watch
或hexo g -w
- 监听文件变化:
部署:
hexo deploy/d
- 先生成后部署:
hexo d -g
- 等于
hexo g
加hexo d
- 先生成后部署:
启动本地服务器(服务器会监听文件变化并自动更新)
hexo server/s
启动调试:
hexo s --debug
预览草稿:
hexo s --draft
清除缓存:
hexo clean
# 站点配置
# 主题安装教程
安装教程: NexT主题官网 (opens new window) Butterfly主题 (opens new window)
# 下载主题&启动
cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
# 编辑_config.yml
theme: next
# theme: Butterfly
2
3
4
5
# NexT 主题配置
# 设定主题/语言
主题配置的文件在themes/NexT 文件夹下的_config.yml 中,我们按照官网教程,依次配置
#scheme: Muse
#scheme: Mist
scheme: Pisces
language: zh-Hans
2
3
4
5
# 添加标签/分类/关于页面
hexo 新建命令 hexo n [layout] title
中 layout 有三个模板
post创建文章,生成在/source/_posts
文件夹下,draft创建草稿,生成在/source/ _drafts
文件夹下,page创建页面,生成在/source/YourPageName
文件夹下
![image-20191027011714501](/Users/ppsteven/Library/Application Support/typora-user-images/image-20191027011714501.png)
新建页面
hexo new page tags hexo new page categories hexo new page about
1
2
3修改菜单(编辑 themes/next/_config.yml)
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 # 公益404
1
2
3
4
5
6
7
8
9
# 设置头像
_config.yml 在blog 文件和 theme/next 文件夹下都有
blog 下的为站点配置文件,主题下的为主题配置文件
mkdir themes/next/source/uploads
,放置头像图片(jpg/gif 等)
修改配置文件
# avatar: http://example.com/avatar.png
avatar: /uploads/avatar_1.jpg
2
# 设置作者昵称
修改 站点配置文件
author: Your name
# 设置阅读字数与时长
需要安装插件,地址 (opens new window)
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true
2
3
4
5
6
7
8
# 配置搜索服务
Local Search添加百度/谷歌/本地 自定义站点内容搜索
cnpm install hexo-generator-searchdb --save
编辑站点配置文件,新增如下代码
search:
path: search.xml
field: post
format: html
limit: 10000
2
3
4
5
编辑主题配置文件,启动本地搜索
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 3
2
3
4
5
6
7
8
9
设置摘要
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: True
length: 150
2
3
4
5
# 多端同步
正常情况下,我们写的博客是备份在本地的,没有上传服务器,但是若是有多台电脑的话。如何保持同步是一个问题。最近用闲置的笔记本搞了一个manjaro 玩耍,需要进行多端同步。
# 创建分支
在blog
文件夹下,我们用hexo d
命令提交的仅仅是public 文件夹里面的内容,默认的是提交在 master 分支上。为了在同一个repo 下管理我们的博客,我们可以建立新的分支hexo
github 上创建一个新的分支 hexo。进入仓库在,点击Branch,输入新的分支名回车建立
在本地仓库创建hexo 分支,添加remote 地址
$git checkout -b hexo # 代表创建并切换 $git remote add origin git@github.com:PPsteven/hexo_source.git # 添加远端地址 $git remote -v # 查看remote 地址 origin git@github.com:PPsteven/PPsteven.github.io.git (fetch) origin git@github.com:PPsteven/PPsteven.github.io.git (push)# 表示添加成功
1
2
3
4
5
6其实有一个取巧的方法,在GitHub上创建新的分支hexo 后,在blog 文件夹中直接将该仓库的hexo 分支克隆到本地。
$git clone -b git@github.com:PPsteven/PPsteven.github.io.git
1向本地分支添加文件
$git add . # 本地文件添加至暂存区 $git commit -m "blog file backup" # 暂存区文件提交至本地分支 $git push origin hexo # 向远端hexo 分支提交文件
1
2
3
看到网上讨论,在提交文件的时候,themes 文件夹会出错。原因是themes 下文件夹的主题包含.git 文件,造成了冲突,删除即可。
# 同步分支
进入新的电脑,同步到本地就可以编辑了
$git pull origin hexo
# 参考教程:
hexo教程:基本配置+更换主题+多终端工作+coding page部署分流(2) (opens new window)
学习了上面的教程后,基本的搭建和部署已经没有问题了。