Git Pages + Hexo 搭建个人博客

这段时间弄了一哈个人博客,感觉挺有意思的,于是边学边做了一哈记录,就有了这篇博客。

GitHub Pages

1.进入Github账号, 建立一个名字为username.github.io(其中username为你自己的用户名)形式的仓库

  1. 将刚建立的仓库克隆至本地:
  1. 测试一下GitHub Pages是否顺利运行

    • 上传一个内容为“Hello World”的html文件

      $ cd username.github.io
      # 注意这里的username为你的用户名
      $ echo "Hello World" > index.html
      $ git add --all
      $ git commit -m "测试"
      $ git push -u origin master
      
  • 打开https://username.github.io这个网站(注意username为你的用户名),如果试一下情况则表示成功了:

部署hexo

安装

在安装Hexo之前需要安装以下程序:

  • Git
  • Node.js

由于之前在建立Git Pages时已经安装好了git bash,所以接下来就需要安装Node.js了

安装Node.js

由于我的电脑是win10系统,所以我选择用安装包进行安装

  • 进入https://nodejs.org/en/这个网站进行下载,我选择的是左边的稳定版

  • 注意在安装过程中记得选add to path选项添加至环境变量

安装Hexo

由于之前在安装时已将nvm添加至环境变量,所以可以直接通过nvm命令安装Hexo

$ npm install -g hexo-cli

可能要等一段时间才会安装成功,我的就等了20s。。。

部署

成功安装之后,就可以开始Hexo的部署了!

启动hexo

首先创建项目文件夹,我自己的文件夹名字是hexo_blog

$ hexo init hexo_blog
$ hexo install
$ hexo server

之后用浏览器打开localhost:4000出现以下画面说明Hexo服务正常启动:

部署hexo至GitHub Pages

修改部署配置

打开上一步创建的hexo_blog文件夹,其中有一个名为_config.yml的文件,修改以下配置:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

修改为:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/JasonLmile/jasonlmile.github.io.git
  branch: master

注意!!!上面那个repo的值应该是你之前建立的那个GitHub Pages项目的地址!!!

进行部署
  • 先安装hexo-deployer-git

    $ npm install hexo-deployer-git
    
  • 进行部署

    $ hexo deploy
    

    完成之后浏览器打开GitHub Pages项目的地址https://username.github.io,发现跟你之前启动本地服务器后访问localhost:4000的效果是一样的,这代表部署成功了!!

Hexo设置

主要设置

通过修改_config.yml配置文件对博客进行修改,常用的参数有如下几种:

  • title:网站标题
  • subtitle:网站副标题
  • description:网站描述
  • anthor:作者名称
  • language:网站使用语言

主题修改

可能你会认为默认的主题不太好看,没关系,你可以在https://hexo.io.themes/中寻找自己喜欢的主题,克隆至本地进行配置。以目前最火的一个主题next为例:

  • 进入之前建立的hexo项目文件夹(我建立的叫hexo_blog),执行:

    $ cd themes
    $ git clone https://github.com/iissnan/hexo-theme-next
    
  • 更改配置文件_config.yml

    将以下内容:

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: landscape
    

    改为

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: hexo-theme-next
    

    其中theme的值为你下载至本地的主题名字

  • 执行以下命令,在本地进行调试:

    $ hexo clean 
    $ hexo generate
    $ hexo server
    

    这三条命令分别有以下功能:

    • hexo clean:清空及删除public文件夹
    • hexo generate:生成静态文件
    • hexo server:启动本地服务器进行调试

    这时候访问http://localhost:4000/会发现博客主题已经变了:

    之后可通过hexo deploy命令部署至Github上

主题设置

主要是通过theme文件夹下的_config.yml文件进行设置(!!!注意这个和之前的_config.yml文件同名但是不同位置

首页显示摘要

enable的值由false改为true就可以在首页只显示文章摘要了。默认显示前150个字,但是你可以通过在发布的文章中添加>来指定摘要的内容,只显示这个符号前面的文字。

添加标签界面

新建一个页面命名为tags

$ hexo new page tags

这时会发现在项目下source文件夹下会出现一名为tags的新建文件夹,对该文件夹里的index.md文件进行编辑:

---
title: tags
date: 2019-03-04 20:38:08
type: tags
comments: false
---

添加分类界面

添加标签界面类似,先新建一个名为categories的界面:

$ hexo new page tags

编辑categories下的index.md为:

---
title: categories
date: 2019-03-04 20:36:29
type: categories
comments: false
---

添加评论系统

next主题本身就集成了Valine评论系统,不过需要leancloud账号才能使用。所以首先你需要注册一个账号:

点我注册!!

注册完之后需要先创建一个应用:

创建之后,点开该应用,进入设置->安全中心,将web安全域名改为你的博客域名。然后进入设置->应用Key复制App IDApp Key的值,填入主题配置文件中:

再将文件中enable的值改为true。部署之后博客就可以评论了。

添加阅读次数

next主题同样提供了leancloud的统计阅读次数的功能。我们只需要打开之前创建的leancloud应用(注意ACL权限设置为无限制),点开 存储->数据->创建Class 创建一个名称为Counter的class,之后再修改主题配置文件即可。

image

最后晒一下自己的博客把,虽然只有两篇文章😂

参考:

文档|Hexo

主题配置——Next使用文档

为你的Hexo加上评论系统-Valine——BlueLzy's Blog

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容