缘起
今天博客出现致命问题, 重新配置的过程中翻阅之前的笔记, 顺带整理了一下, 分享在这里.
基本操作流程
- 前提:
- 安装 hexo:
npm install hexo -g
和npm install hexo-cli -g
- 上 Github 创建 repository: 名称设置为
yourname.github.io
. 比如, 我的 Github 账户用户名是Patiencing
, 那么名称就是Patiencing.github.io
; - 克隆github远程仓库: 进入你要放置博客数据的文件夹,
git clone https://github.com/yourname/yourname.github.io.git
(注意, 这里的yourname
要换成你的github名称); - 初始化:
hexo init your_folder
(your_folder
是你要放置博客数据的文件夹名称),cd your_folder
,npm install hexo-deployer-git --save
,hexo generate
- 基本配置: 找到博客文件夹根目录中的
_config.yml
, 找到文件中deploy:
这一行, 改成:
deploy:
type: git
repo: https://github.com/yourname/yourname.github.io.git
branch: master
- 博客部署:
hexo deploy
, 之后就可以在浏览器地址栏输入yourname.github.io
(这里的
yourname
要换成你的 github 名称), 就可以看到你的博客了 - 发布文章:
hexo new page "your_post_title"
是创建文章, 写完博客, 再hexo generate
和hexo deploy
就可以在你的博客中看到更新了
常用命令
hexo new page <filename> //创建草稿
hexo new draft <filename> //创建草稿
hexo publish <filename> //发表草稿
hexo generate //hexo对文章进行处理, 生成静态文件
hexo server //启动本地服务器,可以在本地查看博客
hexo server --debug //生成本地服务器, 检查错误并记录到 debug.log,可以用来在正式发布前进行调试
hexo deploy //部署博客, 本质就是使用git推送到github
写作约定
写作语法
Hexo 的写作语法基于 Markdown.
使用 hexo new page "your_post_title"
命令会在 /source/_posts
下创建 your_post_title.md
文件.
基本信息
在文章最开始写下基本信息:
---
title: my_title //博客标题
categories: my_cat //博客所属的类别
tags: [tag01, tag02] //博客的标签, 多标签用中括号包含, 用逗号分隔
permalink: my_url //自定义url地址, 主要是为了解决中文标题在url中被转码, 所以使用permalink设置英文url地址
comments: false //普通文章不需要这个设置, 对于一些不需要评论的可以设置`comments`为`false`
---
摘要效果
想要下面这种"摘要"效果, 只需要在文章中插入 `` 即可.
博客的配置
博客文件夹根目录中的 _config.yml 就是博客的配置文件
站点基本信息
title: //博客标题
subtitle: //博客副标题
description: //博客描述
author: //作者
language: //博客语言, 中文使用zh-Hans
timezone: //时区, 中国是Asia/Shanghai
avatar: //设置头像,后面跟着头像图片的url (默认没有这个选项, 自己手动加上)
文章归档
default_category: others //文章默认归档
category_map: //文章栏目,下面是示例
职人: crafts
生活: life
其它: others
url 地址重写
url: https://yourname.github.io/ //这是博客的主域名
root: / //首页的位置, 默认就是根目录
permalink: :year/:month/:title.html //这是博客文章的url地址的前缀, 注意后面可以加上".html"
整个url地址由3部分组成:
- 这里的
url: https://yourname.github.io/
- 这里的
permalink: :year/:month/:title.html
- 这里的
:title
默认对应的就是前面"写作约定 -> 基本信息"中的title: my_title
, 因为我们一般用中文标题, 而中文标题在 URL 中会被转码, 所以更推荐使用英文, 写在"写作约定 -> 基本信息"中的permalink: my_url
比如, 这篇文章的在我的 Hexo博客上的 URL 地址是
https://patiencing.github.io/2016/11/build_a_blog_with_hexo.html
.
百度站点认证和站点地图
听说 GitHub 阻拦了百度搜索引擎的爬虫, 如果确实如此, 那么设置"百度站点认证"和"站点地图", 对于在 GitHub上搭建的 Hexo博客的意义就不大了, 不过对于有自己域名空间的人来说还是很有意义的, 而且这个方案是自己花时间摸索出来的, 所以记录下来供大家参考.
百度站点认证
- 进入百度站长平台;
- 注册自己的博客站点(https://yourname.github.io/)
- 验证时选择" HTML 验证", 将百度提供的验证代码(
<meta name="baidu-site-verification" content="xxxxxx" />
)插入首页的<head></head>
中; 我使用的是 Next 主题, 它的首页在/themes/next/layout/_layout.swig
. 插入后的代码:
<html class="{{ html_class | lower }}">
<head>
{% include '_partials/head.swig' %}
<meta name="baidu-site-verification" content="xxxxxx" />
<title>{% block title %}{% endblock %}</title>
</head>
Bingo! 通过百度站点验证:
如果使用的是 Hexo 默认的 landscape 主题, 那么首页文件在 /themes/landscape/layout/_partial/head.ejs
生成站点地图
- 安装插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
- 在博客文件夹根目录的 _config.yml 中添加如下代码,自动生成 sitemap 文件
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
之后在 /public
文件夹会发现多出了 baidusitemap.xml
和 sitemap.xml
, 前一个文件适合提交给"百度", 后一个可以提交给 "Google"
本地写作工具
Mac 上推荐 Mweb, 一款国人出品的 Markdown 编辑器. 对 Hexo 做了优化, 能够很方便得插入图片, 可以实时预览 Markdown, 而且能够很方便得上传图片到"七牛".
参考资料
文章历史
- 2016/11/10 (第一次发布)
- 2017/06/19 删除冗余描述
如果你觉得我的文章对你有用, 请打个"喜欢", 或者给些改进的建议 _
网友评论