Hexo个人博客搭建(Yilia主题)
一、安装Hexo
$ npm install -g hexo-cli
二、安装 Git
$ sudo apt-get install git-core
三、安装 Node.js
$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
$wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
//执行完上面命令后,需要重启
$ nvm install stable
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
新建完成后,指定文件夹的目录如下:
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
$ hexo new "post title with whitespace"
生成静态文件
$ hexo generate
发表草稿
$ hexo publish "post title with whitespace"
启动服务器
$ hexo server
发现当关闭XShell5后 hexo的服务就会关闭,这样就造成无法在后台运行,于是需要安装
安装pm2
四、安装pm2(后台运行)
npm install -g pm2
在博客根目录下创建一个文件run.js
//run.js
const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
if(error){
console.log(`exec error: ${error}`)
return
}
console.log(`stdout: ${stdout}`);
console.log(`stderr: ${stderr}`);
})
pm2后台启动hexo
//进入博客根目录
pm2 start run.js
这时就可以访问到自己的博客了
五、配置主题
推荐几个hexo主题
几个好用的hexo主题
5.1 Github下载Yilia主题
$ cd /d/document/GitHub/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
修改hexo根目录下的 _config.yml : theme: yilia
然后配置yilia文件下的_config.yml(目录:hexo/themes/yilia/_config.yml) 配置文件
# Header
menu:
主页: /
归档: /archives
# 随笔: /tags/随笔/
# SubNav
subnav:
github: "https://github.com/diaokx"
#weibo: "#"
rss: "/atom.xml"
#zhihu: "#"
qq: "qq"
#weixin: "#"
jianshu: "https://www.jianshu.com/u/e3bfe2b21dc4"
#douban: "#"
#segmentfault: "#"
#bilibili: "#"
#acfun: "#"
mail: "qq"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"
rss: /atom.xml
# 是否需要修改 root 路径
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /
# Content
# 文章太长,截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false
# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你的奖励O(∩_∩)O哈哈~'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay: /assets/alipay.jpg
# 微信二维码图片地址
weixin: /assets/weixinpay.jpg
# 目录
# 目录设定:0-不显示目录; 1-文章对应的md文件里有toc:true属性,才有目录; 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置,如果你的目录标题习惯有标号,置为true即可隐藏hexo重复的序号;否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录,不存在的…'
# 是否有快速回到顶部的按钮
top: true
# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png
#你的头像url
avatar: /assets/header.png
#是否开启分享
share_jia: true
#评论:1、多说;2、网易云跟帖;3、畅言;4、Disqus;5、Gitment
#不需要使用某项,直接设置值为false,或注释掉
#具体请参考wiki:https://github.com/litten/hexo-theme-yilia/wiki/
#1、多说
duoshuo: false
#2、网易云跟帖
wangyiyun: false
#3、畅言
changyan_appid: false
changyan_conf: false
#4、Disqus 在hexo根目录的config里也有disqus_shortname字段,优先使用yilia的
disqus: false
#5、Gitment
gitment_owner: false #你的 GitHub ID
gitment_repo: '' #存储评论的 repo
gitment_oauth:
client_id: '' #client ID
client_secret: '' #client secret
# 样式定制 - 一般不需要修改,除非有很强的定制欲望…
style:
# 头像上面的背景颜色
header: '#4d4d4d'
# 右滑板块背景
slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
# slider的设置
slider:
# 是否默认展开tags板块
showTags: false
# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
# friends: false
smart_menu:
innerArchive: '所有文章'
#friends: '友链'
aboutme: '关于我'
#friends:
#友情链接1: http://localhost:4000/
#友情链接2: http://localhost:4000/
#友情链接3: http://localhost:4000/
#友情链接4: http://localhost:4000/
#友情链接5: http://localhost:4000/
#友情链接6: http://localhost:4000/
aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家
5.2 点击qq和mail图标发现有报错页面,所有需要新建与subnav配置下的qq对应的目录
$hexo new page qq
该命令在 source 目录下生成一个 qq 目录,qq 目录下有一个 index.md (可以对index.md进行编辑)文件。
//生成html
$hexo g
5.3 点击所有文章提示缺失模块
1、问题
点击 所有文章 提示缺失模块
2、解决办法
- 确保 node 版本大于 6.2
- 在博客根目录(注意不是 yilia 根目录)执行以下命令:npm install hexo-generator-json-content --save
- 在 hexo 的 blog 根目录_config.yml 里添加配置(保持格式,不要改动任何空格缩进),关掉 hexo s之后执行 hexo g 重新生成:
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
执行完后发现有报错,报错提示:ERROR Plugin load failed: hexo-generator-json-content
问题原因需要安装n模块,并将node.js更新到最新稳定版,执行命令如下:
//安装n模块
$ npm install -g n
//更新node.js
$ n stable
5.4 头像/图片不显示
1、存放位置
头像、图标图片的存放位置是 /themes/yilia/source/
下任意位置,可以自己新建一个文件夹存放,我存放在assets
文件夹下。
2、配置设置
配置文件为/themes/yilia/_config.yml
由于设置路径的根目录 /themes/yilia/source/
,因此,我的头像存放的地址是/themes/yilia/source/assets/header.png
,设置则为 avatar: /assets/header.png