linux环境hexo和GithubPages搭建我的博客

时间 2020-01-17

标签 linux 环境 hexo githubpages 搭建我的博客栏目 Linux 繁體版

原文原文链接

什么是Hexo

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架，能够方便的生成静态网页托管在github和Heroku上，引用Hexo做者 @tommy351 的话：javascript

快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.目前，在github上搭建博客系统使用最多就是Hexo和Jekyll，Jekyll是基于Ruby开发的。html

GitHub Pages优势

免费：github提供gh-pages服务是免费的，有300MB空间；
开源：因为github开源的缘由，有不少人参与其中，天然技术支持很好。
便捷：博客彻底托管在github上，基本上不须要花时间去管理，博客使用Markdown语法，上手很容易。java

配置环境

安装 epel源

rpm -Uvh http://dl.fedoraproject.org/pub/epel/beta/7/x86_64/epel-release-7-0.2.noarch.rpm

安装nodejs

curl -sL https://rpm.nodesource.com/setup | bash -
yum install -y nodejs

安装HEXO

npm install -g hexo

初始化

建立一个文件夹，如：Blog，cd到Blog里执行hexo init的。命令：node

hexo init

生成静态页面linux

hexo generate（hexo g也能够）

启动本地服务，进行文章预览调试，命令：git

hexo server

浏览器输入http://10.10.3.61:4000/ (由于个人linux 装在虚拟机上 ,若是你的linux是实体机,直接访问 http://localhost:4000),本地已经简单的设置好了，可是如今域名和服务器都是基于本身的电脑，接下来须要跟github进行关联.github

创建Repository

创建与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】，固定写法而后创建关联，目录结构以下：chrome

.
├── .deploy       #须要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其余源文件, 404 favicon CNAME 等都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

编辑配置文件_config.yml

翻到最下面，改为我这样子的，注意： : 后面要有空格npm

deploy:
  type: git
  repository: https://github.com/wangxujun163163/wangxujun163163.github.io.git
  branch: master

执行以下命令才能使用git部署json

npm install hexo-deployer-git --save

发布博客到github

hexo deploy

如今我的博客就创建好了
而后再浏览器中输入https://wangxujun163163.githu...，个人 github 的帐户叫 wangxujun163163 ,把这个改为你 github 的帐户名就好了

添加博文

hexo new "postName"  #新建博文,其中postName是博文题目

博文会自动生成在博客目录下source/_postspostName.md

文件自动生成格式:

title: "first article"  #博文题目
date: 2014-11-21 11:25:38      #生成时间
tags:                    #标签, 多个标签也可使用格式[tag1, tag2, tag3,...]
- tag1
- tag2
- tag3

---
正文, 使用 Markdown 语法书写

若是不想博文在首页所有显示, 并能出现阅读全文按钮效果, 须要在你想在首页显示的部分下添加

<!--more-->

主题更改

git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia

在./_config.yml，修改主题为yilia
theme: yilia
这是yilia主题的预览效果

若是以为很差看能够换next主题

git clone https://github.com/iissnan/hexo-theme-next themes/next

在./_config.yml，修改主题为next
theme: next
在切换主题以后咱们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。在服务启动的过程，注意观察命令行输出是否有任何异常信息
当命令行输出中提示出：

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时便可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

设置站点语言

在./_config.yml，设置简体中文
language: zh-Hans

设置头像

编辑站点配置文件_config.yml，新增字段 avatar，值设置成头像的连接地址。
avatar: https://avatars3.githubuserco...

添加多说评论

使用多说前须要先在多说建立一个站点，填写站点相关信息。多说域名这一栏填写的便是你的 duoshuo_shortname
编辑站点配置文件_config.yml，新增字段 duoshuo_shortname
duoshuo_shortname: wangxujun163163

添加百度统计

登陆百度统计，定位到站点的代码获取页面

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?54d6bb2751acd80aacb143d98697dce2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

编辑站点配置文件，新增字段 baidu_analytics 字段，值设置成你的百度统计脚本 id

发布静态代码到github

hexo clean  #删除缓存
hexo g #生成静态页
hexo d  #发布代码

next 主题的详细配置请参考 http://theme-next.iissnan.com/theme-settings.html

开启打赏功能

只须要主题配置文件中填入微信和支付宝收款二维码图片地址便可开启该功能。
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创做！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

腾讯公益404页面

腾讯公益404页面，寻找丢失儿童，让你们一块儿关注此项公益事业！效果以下 https://wangxujun163163.githu...

使用方法，新建 404.html 页面，放到主题的 source 目录下，内容以下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="your site url "
        homePageName="回到个人主页">
</script>

</body>
</html>

添加「标签」页面

hexo new page tags

注意：若是有启用多说或者 Disqus 评论，页面也会带有评论。若须要关闭的话，请添加字段 comments 并将值设置为 false，如：

---
title: tags
date: 2017-02-14 17:38:06
type: "tags"
comments: false
---

添加「分类」页面

hexo new page categories
---
title: categories
date: 2017-02-14 17:39:40
type: "categories"
comments: false
---

订阅微信公众号

在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。

而后编辑主题配置文件，以下：

配置示例

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅个人博客！