本文主要分为三部分,安装前准备,Hexo配置以及关联GitHub。简单说明一下,安装前准备就是博客需要的一些配置,Hexo是静态博客托管平台,我们在本地可以编辑博客,更换主题等。本地更改之后网站是没法变化的(因为就是在本地编辑的,不是编辑的网站),我们需要将与本地博客相关联的那个仓库更新,然后网页的那个博客才能更新
安装前准备
- GitHub账号
- 安装Git
- 安装nodejs
- 安装hexo
GitHub账号
在GitHub官网申请账号,并新建一个和自己名字相同的github.io仓库,比如我这里叫harrytea,就新建一个名为harrytea.github.io
的仓库。仓库主要用来存储自己的博客文件
安装Git
这个大家自行搜索安装即可
安装nodejs
hexo是基于nodejs写的,这里安装nodejs,官方网站
sudo apt-get install nodejs
sudo apt-get install npm
安装完后运行下面命令检查是否安装成功node -v
npm -v
安装hexo
hexo是个人博客网站的框架,可以创建文章,修改主题等,官方网站
npm install hexo-cli -g
这个命令可能会报错,如果报错根据错误提示命令改为sudo npm install hexo-cli --location=global
,然后输入hexo -v
检查是否安装成功
Hexo配置
本地基本设置
在本地创建一个叫做blog文件夹(其他名字也可以),并用hexo初始化此文件夹
hexo init hexo-blog
cd hexo-blog
npm install
安装完后启动hexo,查看当前网页主题
hexo g
hexo server
此时会打开http://localhost:4000
网页,你就能看到你本地的网页了(注意只是本地网页的效果)
更换主题
配置完hexo之后,我们需要更换主题,有很多主题的选择,官网主题,这里介绍两个主题的使用NexT以及Fluid
NexT
主题安装
cd hexo-blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
主题使用
打开hexo-blog的_config.yml
文件进行配置theme:next
启动主题
hexo g -d
hexo s
Fluid
主题安装
主题网站: 安装方法
官网给了两种安装方法,命令行安装和手动安装,这里将手动安装方法copy了过来
下载最新release版本解压到themes
目录,并将解压出的文件重命名为fluid
指定主题
修改hexo博客目录中的_config.yml
theme: fluid # 指定主题
language: zh-CN # 指定语言,会影响主题显示的语言,按需修改
创建「关于页」
首次使用主题的「关于页」需要手动创建
hexo new page about
创建成功后,编辑博客目录下/source/about/index.md
,添加layout
属性
修改后的文件示例如下:
---
title: about
layout: about
---
这里写关于页的正文,支持Markdown,HTML
启动主题
hexo g -d
hexo s
编写自己的文章
继续上面的fluid主题,修改hexo博客目录中的_coonfig.yml
,这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件
post_assert_folder: true
例如创建一篇文章名为test
hexo new post test
然后进入到source/_post
目录下找相应的md和test文件夹即可,md写内容,test文件夹放图片
下面演示三种图片引用方式: 官方推荐方式,markdown语法以及第三种,第三种和前两种的图片存放方式不同,图片是在/source/images
目录下,并且在md文件中无法显示,在页面上可以正常显示,图片引用参考
{% asset_img test.png 图片引用方法一 %}
![图片引用方法二](test.png)
![图片引用方法三](/images/test.png)
主题启动
hexo g -d
hexo s
个性化页面展示
浏览器Tab名称
修改_config.yml
的title
字段
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
博客标题
修改themes\fluid
下_config.yml
的blog_title
字段
主页正中间的文字
主题目录themes\fluid
下_config.yml
的text
字段
添加阅读量统计
注册leancloud账号并实名认证等
然后在应用选项处点击创建应用,选择开发版,在设置-应用凭证处找到AppID和AppKey记录下来以后使用
修改fluid设置
在themes\fluid
下的_config.yml
文件下修改下面配置
web_analytics:
enable: true # 改为true
leancloud:
app_id: xxx # 把刚才的appid复制过来
app_key: xxx # 把刚才的appkey复制过来
views:
enable: true
source: "leancloud" # 改为leancloud
修改网站底部的PV UV统计数
statistics:
enable: true
source: "leancloud"
pv_format: "总访问量 {} 次"
uv_format: "总访客数 {} 人"
添加评论
修改themes\fluid
下的_config.yml
文件
comments:
enable: true
type: valine
配置leancloud
的appid和appkey
valine:
appId: xxx
appKey: xxx
部署
下面用netlify部署
首先在GitHub上创建一个仓库,随后复制刚才的GitHub地址,进入到本地的blog根目录,将二者关联起来
# https://github.com/name/your-Repository.git
git init
git remote add origin https://github.com/name/your-Repository.git
然后在.gitignore
中写我们不想推送的文件
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/
_multiconfig.yml
之后推送即可,然后在hexo的_config.yml
中找到deploy项,并添加分支run-page
deploy:
type: git
repository: git@github.com:name/your-Repository.git
branch: run-page
退出重新执行一下
hexo clean # 清理各种缓存和旧文件
hexo g # 生成静态文件
# 同步到github的run-page分支
hexo d # 部署应用
# 出现如下错误
# $ ERROR Deployer not found: git
# 安装依赖解决错误
npm install hexo-deployer-git --save
hexo d # 重新部署
此时进入github,你的仓库就会多出一个分支run-page
托管到netlify
这一步是最关键的,首先进入到netlify官网注册一下账号