CentOs7+Hexo+Github博客搭建

Posted on

hexo是一个基于Node.js的快速，简单而强大的博客框架。我们可以使用Markdown编写文章，可以方便的生成静态网页托管在Github上

下面是我自己的博客搭建的基本流程。

搭建步骤

安装node.js

1.下载

1
# wget https://nodejs.org/dist/v9.3.0/node-v9.3.0-linux-x64.tar.xz

2.解压

1
2
# xz -d node-v9.3.0-linux-x64.tar.xz
# tar -xvf node-v9.3.0-linux-x64.tar

3.移动

1
2
mv  node-v9.3.0-linux-x64 node-v9.3.0
mv  node-v9.3.0 /usr/local/node

4.配置环境变量

1
2
3
# vi /etc/profile
# 在底部添加 PATH 变量
export PATH=$PATH:/usr/local/node/bin

保存退出

安装git(已安装可以跳过)

1
2
3
# yum -y install git
# git --version
git version 1.8.3.1

安装npm(已安装可以跳过)

1
2
3
# yum -y install npm
# npm -v
3.10.10

安装Hexo的环境已经搭建完成，下一步可以使用npm安装Hexo

安装Hexo

1
# npm install -g hexo-cli

初始化Hexo文件夹

1.首先创建一个博客目录

2.进入博客目录之中去

3.输入以下命令

1
2
3
4
5
# hexo init  //初始化博客
# npm install
# hexo -v //此时博客已经创建成功
#ls //查看都有什么文件
_config.yml  db.json  node_modules  package.json  scaffolds  source  themes

创建一个github账号，并且新建一个仓库，格式如下：

1
仓库名:username:github.io

然后就是把Hexo与Github连接起来

修改站点配置文件

进入创建的博客文件夹中，进入_config.yml文件

1
2
3
4
5
6
//翻到最后修改
deploy: 
    type: git
    repo: https://github.com/Peithon/Peithon.github.io.git
    branch: master
    message: '站点更新:{{now("YYYY-MM-DD HH:mm:ss")}}'

保存站点配置文件

修改_config文件就是个hexo d作相应的配置，让Hexo知道blog要部署再GitHub的仓库里面

安装git部署插件

1
# npm install hexo-deployer-git --save

生成SSH密钥

1
2
# cd ~/. ssh #检查本机已存在的ssh密钥
# ssh-keygen -t rsa -C "注册github账号的邮箱地址"

然后连续按3次回车，最终会生成两个文件在/root/.ssh下，打开目录，找到.ssh/id_rsa.pub文件，使用cat id_ras.pub查看密钥内容，并将内容复制，打开你的github主页，进入个人设置->SSH and GPG keys->New SSH key,将刚复制的内容粘贴到key那里，title随便填，保存

进行git全局配置

1
2
# git config --global user.name "github用户名"
# git config --global user.email "注册github的邮箱"

部署博客到github上

1
2
3
# hexo clean //清除缓存，若是网页正常情况下可以忽略这条命令
# hexo g   // == hexo generate  生成
# hexo d   //== hexo deploy 部署

每次对于博客更改都需要用这三条语句将页面“刷新”。

注意：每次使用这三条语句的时候都必须要在自己创建的博客目录下，不能在别的目录下，不然会提示错误

发布文章

1
#hexo n "文章名字"

在blog根目录下的source文件夹的_post文件夹中多了一个文章名字.md文件 然后将写好的md文件内容复制到刚生成的md文件中，回到博客目录，重新用三条语句”刷新”博客，就可以发现文章已经上传上去了。

美化博客

在Hexo有官方的主题网站

1
https://hexo.io/themes/

可以直接在上面下载自己喜欢的主题。

我选择的是NexT主题，比较简洁清爽

安装

我是用的git clone的方法，文档中还有其他方法 

1
$ git clone https://github.com/theme-next/hexo-theme-next /next

就会在当前目录下生成一个next文件夹，进入文件夹之后就是next主题的所有东西。

设置主题

在hexo根目录下的配置文件config.yml里设置主题

1
theme: next

配置主题

接下来我们就可以来按需配置主题内容了，所有内容都在themes/next文件夹下的config.yml文件里修改。

官方文档里写的是有些配置需要将一部分代码添加到配置文件中，但其实不用，我们逐行看配置文件就会发现，有很多功能都已经放在配置文件里了，只是注释掉了，我们只需要取消注释，把需要的相关信息补全即可使用

菜单栏

原生菜单栏有主页、关于、分类、标签等数个选项，但是在配置文件中是注释掉的状态，这里我们自行修改注释就行

1
2
3
4
5
6
7
8
9
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

注意点：

​ 如果事先没有通过hexo new page <pageName>来创建页面的话，即使在配置文件中取消注释，页面也没法显示

​ 我们也可以添加自己想要添加的页面，不用局限在配置文件里提供的选择里

​ ||后面是fontAwesome里的文件对应的名称

​ menu_icons记得选enable: true（默认应该是true）

主题风格

主题提供了4个，我们把想要选择的取消注释，其他三个保持注释掉的状态即可。

第三方插件

Hexo-admin

Hexo-admin插件允许我们直接在本地页面上修改文章内容。

  • 下载

    1
    npm i hexo-admin --save

  • 登录http://localhost:4000/admin即可看到我们所有的文章内容，并且在可视化界面中操作文章内容

Hexo-douban

hexo-douban插件可以在博客中添加豆瓣电影、读书和游戏页面，关联我们自己的账号。

  • 下载

    1
    npm install hexo-douban --save

  • 配置

    在hexo根目录下的config.yml文件中添加如下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    douban:
      user: 
      builtin: false
      book:
        title: 'This is my book title'
        quote: 'This is my book quote'
      movie:
        title: 'This is my movie title'
        quote: 'This is my movie quote'
      game:
        title: 'This is my game title'
        quote: 'This is my game quote'
      timeout: 10000

    title和quote后面的内容会分别作为电影/读书/游戏页面的标题和副标题（引言）呈现在博客里。

    user就写我们豆瓣的id，可以在“我的豆瓣”页面中找到，builtin指是否将生成页面功能嵌入hexo s和hexo g中，建议选false，因为true会导致页面每次启动本地服务器都需要很长时间生成豆瓣页面，长到怀疑人生。

  • 生成页面

    1
    2
    3
    4
    hexo douban   #生成读书、电影、游戏三个页面
    hexo douban -b  #生成读书页面
    hexo douban -m  #生成电影页面
    hexo douban -g  #生成游戏页面

  • 在博客中生成页面

    这里就需要用到我们前面提过的hexo new命令了。

    1
    2
    3
    hexo new page books
    hexo new page movies
    hexo new page games

  • 在博客中添加页面

    在menu部分添加我们需要添加的页面名称和相对路径

    1
    2
    3
    4
    5
    6
    menu:
      Home: /
      Archives: /archives
      Books: /books     #This is your books page
      Movies: /movies   #This is your movies page
      Games: /games   #This is your games page

  • 部署到博客

    1
    hexo g -d