github + hexo 博客搭建记录
github + hexo 博客搭建记录
前期准备
下载安装
nodeJS: https://nodejs.org/en/
Git :https://git-scm.com/download/win
配置
git配置
安装好git后,需要配置用户名称和邮件地址
$ git config --global user.name "username"
$ git config --global user.email "aaa@qq.com"
github配置
在自己的GitHub账号下创建一个新的仓库,命名为username.github.io(username 必须与你的账号名保持一致)。
配置SSH key
为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。
检查电脑是否已经有SSH KEYS
$ ls -al ~/.ssh
如果提示:No such file or directory
说明你是第一次使用git如果没有SSH KEY,则生成新的SSH KEY
ssh-****** -t rsa -C "aaa@qq.com"
然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub
文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key
将刚复制的内容粘贴到key那里,title随便填,保存。测试是否成功
$ ssh -T aaa@qq.com
如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:Hi h0ryit! You've successfully authenticated, but GitHub does not provide shell access.
看到这个信息说明SSH已配置成功!
此时你还需要配置:
$ git config --global user.name "liuxianan"// 你的github用户名,非昵称
$ git config --global user.email "aaa@qq.com"// 填写你的github注册邮箱
具体这个配置是干嘛的我没仔细深究。
以上的配置流程,我是用的别人的
安装Hexo
Hexo 官网有详细步骤。
注意事项:
很多命令既可以用Windows的cmd来完成,也可以使用git bash来完成,但是部分命令会有一些问题,为避免不必要的问题,建议全部使用git bash来执行;
hexo不同版本差别比较大,网上很多文章的配置信息都是基于2.x的,所以注意不要被误导;
- hexo有2种
_config.yml
文件,一个是根目录下的全局的_config.yml
,一个是各个theme下的,在配置文件中修改时,冒号后面必须有一个空格,否则可能会出问题
Hexo 创建项目
打开你 Git Bash ,进入到你项目所在目录:
#Hexo 的安装
$ npm install -g hexo
#查看版本,确认是否安装成功
$ hexo -version
#建站
$ hexo init <project-name>
$ cd <project-name>
$ npm install
#生成静态页面(markdown文件转化为html文件)
$ hexo generate
#网站预览(默认的主题风格landscape)
$ hexo server
默认预览端口为:http://localhost:4000/
页面正常显示则创建成功
部署到github
- 配置站点
_config.yml
deploy:
type: git
repo: https://github.com/h0ryit/h0ryit.github.io.git
branch: master
安装git插件
$ npm install hexo-deployer-git --save
部署上线
$hexo generate
$hexo deploy
成功后通过https://username.github.io
进行访问
个性化配置
安装NexT主题
- 下载主题
https://github.com/iissnan/hexo-theme-next
将其放置在./theme/next
目录下(自己创建) - 启用主题
打开站点配置文件_config.yml
theme: next
- 验证主题
hexo s --debug
此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。
站点_config.yml
配置文件
title: h0ryit's blog #博客名字
subtitle: 格物致知,知行合一 #小标题
description: 技术分享 学习记录 #站点描述
author: h0ryit #作者名称
language: zh-Hans #语言
timezone: #时区,可不填写
url: https://h0ryit.github.io/ #一般写自己的站点连接
root: / #设置根目录
permalink: :year/:month/:day/:title/ #生成的链接的格式
permalink_defaults: #生成链接中各部分的默认值
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
- README.md
- CNAME
#目录一般不需要修改,这里需要改动的是skip_render,跳过指定文件的渲染,这里写上去着两个文件名便可
# Category & Tag
default_category: uncategorized #如果撰写文章时没有设置分类,默认的分类选择。
category_map: #用于映射分类的别名。
tag_map: #用法和分类别名是一样的
需要配置的之前都已经说了,其他的保持默认配置就行。
主题配置文件_config.yml
注:不是站点配置文件,在themes/next目录下
选择布局
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces #我选的Pisces布局
#scheme: Gemini
添加RSS
安装 hexo-generator-feed插件
$ npm install --save hexo-generator-feed
修改站点配置文件,在最后添加以下代码:
feed: # RSS订阅插件
type: atom
path: atom.xml
limit: 0
plugins: hexo-generate-feed
修改主题配置文件如下:
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml
菜单设置
图标开启
menu:
home: / || home //首页
archives: /archives/ || archive //归档
categories: /categories/ || th //分类
tags: /tags/ || tags //标签
about: /about/ || user //关于
#schedule: /schedule/ || calendar //日程表
#sitemap: /sitemap.xml || sitemap //站点地图
#commonweal: /404/ || heartbeat //公益404
看看你需要哪个菜单就把哪个取消注释打开就行了
新建页面
在站点根目录输入以下代码新建页面:
$ hexo new page tags
$ hexo new page categories
$ hexo new page about
设置类型
打开站点根目录\source\tags
、站点根目录\source\categories
分别进行修改:
---
title: tags
date: 2018-08-06 08:52:25
type: "tags"
comments: false
---
---
title: categories
date: 2018-08-06 08:52:40
type: "categories"
comments: false
---
如果有集成评论服务,页面也会带有评论。因为后面我们会添加评论系统所以这里需要添加字段 comments 并将值设置为 false。
添加侧边栏社交链接
social:
GitHub: https://github.com/h0ryit || github
E-Mail: mailto:1425810321@qq.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#*: https://*.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
头像设置
打开主题配置文件找到Sidebar Avatar
字段
# Sidebar Avatar
avatar: /images/header.jpg
这是头像的路径,只需把你的头像命名为header.jpg(随便命名)放入themes/next/source/images中,将avatar的路径名改成你的头像名就OK啦!
添加搜索功能
安装 hexo-generator-searchdb
插件
$ npm install hexo-generator-searchdb --save
打开 站点配置文件 找到Extensions
在下面添加
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
打开主题配置文件找到Local search
,将enable
设置为true
添加评论系统
登陆来必力注册,注册后点击导航上的安装,选择免费的city版本,点击现在安装后填入网站的一些信息就可以获取到安装代码,框中的就是你的来必力id:
复制上边的id,在主题配置文件里面搜索livere_uid
,在后面添加来必力id即可:
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: {你的来必力id}
另外可以点击用户头像进入管理界面个性化你的评论系统:
增加版权信息
在目录themes/next/layout/_macro/
下添加my-copyright.swig
,代码如下:
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}
在目录themes/next/source/css/_common/components/post/
下添加my-post-copyright.styl
:
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
修改themes/next/layout/_macro/post.swig
,在代码:
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
前面添加代码:
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
修改themes/next/source/css/_common/components/post/post.styl
文件,在最后一行增加代码:
@import "my-post-copyright"
最后到站点根目录/scaffolds/post.md
,在两个---
中间增加一行:
copyright: true
之后的每一篇文章都会自己加上版权信息,之前的文章也可以通过在文章对应的md文件头部加上以上代码添加版权信息。
添加背景动画
NexT已经自带了多种背景动画效果,你只需要根据需求在主题配置文件修改其中一个为true即可。
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false
添加侧边栏友情链接
修改主题配置文件:
# Blog rolls
links_title: Links
#links_layout: block
links_layout: inline
links:
csdn: https://blog.csdn.net/w0ryitang
自动折叠全文
进入hexo博客项目的themes/next目录
用文本编辑器打开_config.yml文件
搜索”auto_excerpt”,找到如下部分:
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
把enable改为对应的false改为true,然后hexo d -g,再进主页,问题就解决了!
以上是我搭建博客的记录,效果如下
h0ryit’s blog
关于 hexo 的博文写作参考:https://hexo.io/zh-cn/docs/writing
上一篇: POJ 3278(BFS)