这段时间弄了一哈个人博客,感觉挺有意思的,于是边学边做了一哈记录,就有了这篇博客。
GitHub Pages
1.进入Github账号, 建立一个名字为username.github.io
(其中username为你自己的用户名)形式的仓库
- 将刚建立的仓库克隆至本地:
-
测试一下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 ID
和App Key
的值,填入主题配置文件中:
再将文件中enable
的值改为true。部署之后博客就可以评论了。
添加阅读次数
next主题同样提供了leancloud的统计阅读次数的功能。我们只需要打开之前创建的leancloud应用(注意ACL权限设置为无限制),点开 存储->数据->创建Class 创建一个名称为Counter的class,之后再修改主题配置文件即可。
最后晒一下自己的博客把,虽然只有两篇文章😂
参考: