1. 安装Node.js
1.1 下载地址:
https://nodejs.org/zh-cn/download/
选择相应的版本:Windows,x64
1.2 安装
一路点击next,不用改动默认设置
1.3 (可跳过这步)验证安装是否成功
- 在任意文件夹中按Win+R打开命令提示符
- 输入(或鼠标右键复制粘贴,下同)
node -v
,回车 - 再输入
npm -v
,回车 - 如果出现版本号,那么就安装成功了。
1.4 国内无法翻墙的话需要如下操作:
- 按Win+R打开命令提示符
- 输入
npm config set registry https://registry.npm.taobao.org
,回车
2. 安装Git
2.1 下载地址:
https://git-scm.com/download/win
选择相应的版本:Windows,x64
1.2 安装
- 一路点击next,不用改动默认设置
- 最后一步要求选择添加路径,选择:
Use Git from the Windows Command Prompt
1.3 (可跳过这步)验证安装是否成功
- 在任意文件夹中按Win+R打开命令提示符
- 输入
git --version
,回车 - 如果出现版本号,那么就安装成功了。
3. Github
3.1 注册帐号
- 网址:https://github.com/
- 用自己的email进行注册(英文界面),并验证邮箱
- 要记住自己所注册的id(以下假设id为jeantse,后文凡是输入jeantse的地方都改成你的实际id即可)
3.2 建立仓库用于存放博客
- 点击右上角“+”号,选择
New repository
,也就是新建一个仓库 - 在Repository name中填入:
jeantse.github.io
。注意必须填写id!不能填其他单词!id之后的.github.io也不要遗漏! - 勾选
Initialize this repository with a README
- 点击绿色的
Create repository
,就完成了建立仓库的操作
3.3 发布博客首页
- 进入新建的仓库,点击页面中间偏右侧的
Settings
按钮,向下拉到最后有个GitHub Pages
的按钮,点进去 - 点击
Choose a theme
,随便选择一个theme并save。因为之后会修改成自己真正的theme,所以这时可以随便选。 - 稍待片刻,回到GitHub Pages的页面就会有英文提示
Your site is ready to be published at 某某网址
,这就是你的博客网址了,点进去就能看到空白的博客首页。 - 把你的博客网址保存到浏览器的收藏夹吧~
4. 安装Hexo
4.1 安装
- 在电脑上新建一个文件夹,以后所有的博客文件都会放在这里面。
- 文件夹必须用英文名,最好直接建立在硬盘某分区的根目录下。比如:
F:\jeantse.blog
,下文我都用该目录指代博客文件夹,读者请自行替换成自己实际建立的文件夹目录 - 进入该目录,鼠标右键,选择
Git Bash Here
。注意是Bash
不是Gui
! - 会出现一个黑色的代码输入窗口,以后所有的操作都会通过这个Git控制窗口来完成~
注意:以后所有需要
打开Bash窗口
的情况,都必须是在刚建立的这个博客目录F:\jeantse.blog
中打开!千万不能在其他目录(或这个目录的子目录)中去打开!建议每次开机后,进入该目录,打开Bash窗口,然后就不要关闭它!一直开着
对电脑没有坏处!
- 在窗口中输入
npm install hexo -cli -g
,可用鼠标右键复制粘贴(但不能用键盘快捷键ctrl+c或v),回车。 - 耐心等待代码跑完,光标恢复
$
就是跑完了。 - 不放心的话就在窗口中输入
hexo -v
,回车,验证安装是否成功
4.2 初始化
- 在窗口输入
hexo init
,回车 - 等待软件自动生成博客网页。光标恢复
$
就是生成完毕 - 在窗口输入
hexo g
,回车。等待代码跑完 - 在窗口输入
hexo c
,回车 - 等代码出现
……localhost:4000……
字样时,打开浏览器,输入网址localhost:4000
,回车,就能预览到博客了! - 预览完毕,在窗口按下
快捷键ctrl+c(也就是通常的复制键)
退出预览模式,光标恢复$。
总之,任何时候需要预览博客效果,都是通过
hexo g
然后hexo c
来执行。预览完毕记得按ctrl+c
退出预览模式
5. 连接Github与本地
5.1 关联帐号
- 打开Bash窗口
- 输入:
git config --global user.name "jeantse"
,记住把jeantse替换成你自己注册github的id,回车 - 窗口没有任何反应,是对的!(有反应则是报错,检查哪里输错了,重输)
- 再输入:
git config --global user.email "jeantse@email.com"
,记住email替换成你注册github的email地址!回车 - 同样是没有任何反应,才是对的。
5.2 设置密钥SSH key
请在你最常用的电脑上设置,这是将博客与电脑进行了绑定。
一旦更换电脑,就要在新电脑上追加一个新密钥(比如我就在办公室和家里的电脑分别设置了密钥)
- 仍然是在文件夹中打开Bash窗口,输入
ssh-keygen -t rsa -C "jeantse@email.com"
,记得替换注册邮箱,回车 - Github,在右上角你的帐户头像下面点击settings,再点击
SSH and GPG keys
- 新建一个SSH,名字随便写,比如写
work
或home computer
,页面上会有一个SSH输入框。 - 在Bash窗口中输入
cat ~/.ssh/id_rsa.pub
,回车,会显示出一连串代码 - 用鼠标复制显示出的代码,粘贴到网页的SSH输入框中,点击确定保存。
- 在Bash窗口中输入
ssh -T git@github.com
,回车。若出现Hi jeantse! You've successfully……
就是成功了!
5.3 领取github令牌
- 登录Github 账户,从右上角的
Setting
进入Developer settings
再进入Personal access tokens
,找到Generate new token
- Note 填写 Hexo 或 Blog 之类,勾选第一项 repo(亦或全部打勾),然后点击
Generate token
,生成令牌(也就是Token
) - 复制所生成的
Token
,类似ghp_sFs1x2x3x4x5x6x6x7x8x8xxxxxxx
的一串字符 - 回到Windows系统,打开
设置
,搜索凭据
,进入凭据管理器
- 点击
Windows凭据
,在普通凭据
右上角添加普通凭据
。在网址栏填入git:https://github.com
,用户名
填写你的github用户名,密码
栏将所复制的Token填写进去,确认即可。
5.4 修改博客设置
- 进入电脑中的博客文件夹,文件夹根目录下有个文件名叫
_config.yml
。它储存了最核心的博客设置 - 用
txt文本编辑软件(如notepad++)
打开这个设置文件,拉到最后,找到以deploy:
开头的几行 - 将这几行修改成:
deploy:
type: git
repo: git@github.com:JeanTse/jeantse.github.io.git
branch: master
- 别忘了其中的两处jeantse都要改成你自己的id哦~
- 保存并关闭设置文件
- 在Bash窗口输入
npm install hexo-deployer-git
,回车,等待代码跑完,光标恢复到$即可。
6. 发布博文
6.1 写博文
下载并安装一个
markdown编辑软件
,推荐typora:https://typora.io/#windows在Bash窗口输入
hexo new post "新建博文的网页英文名,假设为try"
,回车打开如下目录:
F:\jeantse.blog\source\_posts
,可以发现下面多了一个try.md
文件,这就是你新写的博文的网页了双击该md文件,用markdown编辑软件(如typora)写文。写完保存关闭即可
6.2 设置博文标题、tag、分类
- 打开try.md文件,将其编码转为
UTF-8 无签名
。否则输入中文就会乱码。 - 文件最上方有一个被用短横杠隔开的区域,写着
title: date: tags: categories:
等等 - 把
title:
之后的try
改成你希望的博文标题,任何语种任何长度均可(如“第一篇测试博文”) date:
是你建立这篇博文的时间,你可以将其修改为任意时间,从而改变其在博客归档中所显示的时间位置tags:
是你给博文设置的标签,标签数量不限,中英文不限但不能出现空格- 添加标签的格式如下(注意冒号、方括号、逗号都是半角,冒号和逗号之后必须加空格):
tags: [标签1, 标签2, 标签3]
categories:
是分类,分类数量不限,中英文不限但不能出现空格- 一篇文章可同时被分入多个类别中,某些theme主题还支持多级分类
- 添加分类的格式如下,文章将被同时显示在
类别1
、子类别1.1
、二级子类别1.1.1
,以及类别2
、子类别2.1
、二级子类别2.1.1
之中:categories:
- [类别1, 类别1.1 类别1.1.1]
- [类别2, 类别2.1 类别2.1.1]
6.3 把博文上传到博客网站
- 在Bash窗口输入
hexo g
,回车,耐心等代码跑完 - 输入
hexo s
,回车,用浏览器预览你新写的博文,发现需要修改之处就打开md文件修改、保存,然后刷新浏览器,预览修改后的效果。 - 博文修改完毕,按
ctrl+c
退出预览模式,等待光标恢复成$
- 输入
hexo d
,回车。这个命令的作用是,把你电脑上的博文上传到Github的仓库中 - 期间可能会跳出输入框,需要你输入仓库的ID+PW
- 大约等待2分钟,打开你的博客网址,就能看到新写的博文啦!
7. 个性化主题设置
7.1 下载自己喜欢的theme(主题)
以下用我自己使用的icarus和3-hexo这两种主题为例,两个主题各有特点
7.2 安装主题
- 在官方的主题列表或非官方的用户推荐中挑选喜欢的主题,进入其页面
官方提供的theme仓库,网友上传的自制theme质量良莠不齐,需要耐心挑选:https://hexo.io/themes/
在google搜索
hexo theme
,会跳出不少推荐帖、排行榜,从中挑选更有效率。但容易和其他人的网站撞衫,缺乏独特性。比如,好看但被用滥的主题:next
、icarus(白色版)
(我用的是icarus黑色版,相对罕见)
- 提供theme的网站都会给出其GitHub主题仓库的链接,在仓库页面点击
Clone or download
按钮,下载zip压缩包 - 将zip解压缩,对解出来的文件夹重命名,一般常用其原本的英文名,嫌原名记忆困难也可随便改成诸如
try
之类的都行。总之你自己能记住用过的每种主题的名字即可 - 将
try
的主题文件夹放到F:\jeantse.blog\themes
目录下 - 回到博客根目录
F:\jeantse.blog
,打开_config.yml
,拉到文件最下方,找到theme: landscope
这一行,把landscope
改成你要用的主题名字比如try
,保存 - 总之就是希望用哪个主题,就在
theme:
之后填哪个名字。记住冒号之后有空格!
7.3 根据自己的喜好修改外观
打开:
F:\jeantse.blog\themes\try
目录,通常其中也会有一个名为_config.yml
的设置文件- 万一没有,就先回到
Bash窗口
用hexo g
和hexo s
命令,生成网站预览一下再退出,就会有了
- 万一没有,就先回到
每个主题的设置文件内容都不同,有经验的话就查看该主题的
README
手册,根据手册列出的每项参数的作用,来填写参数对于中文网站,必须将该设置文件的编码转换成
UTF-8 无签名
再保存。否则就乱码常见的通用参数:
博客网站地址
网站标题
icon
作者头像
作者社交网络链接
博客首页抬头图
是否允许多级分类
友情链接
ABOut介绍页面
选择哪家的评论区提供商
是否开启版权声明
是否开通二维码接受读者打赏拿不准的地方,随时可以预览,根据预览效果调整参数
7.4 有些修改是在根目录的设置文件进行
打开博客主目录
F:\jeantse.blog
中的_config.yml
设置文件对于中文网站,必须将该设置文件的编码转换成
UTF-8 无签名
再保存。否则就乱码比较重要的几个参数:
可将非英文语种的tag和分类,映射成英文(避免网址中出现乱码,当然不映射也OK)
permalink,不用时间,而用title,直接根据_posts里的md文件名称生成同名网页
per_page,规定一个页面显示几篇博文
网站地址
网站标题
网站简介
作者名字
显示的语种
选择哪个主题(上文已介绍过如何设置主题)
相应的GitHub仓库地址(上文已介绍过如何修改deploy行的仓库地址)
8. 个性化域名
8.1 挑选并购买域名
- 个人用户的非热门域名,1年只要不到50元RMB,建议一次性买10年,避免涨价
- 千万别从国内比如百度、阿里购买,同一个域名虽然国内购买能便宜1、20元,但——国内必须备案!!!
- 推荐 https://www.namecheap.com/ ,便宜,国内速度快
8.2 设置namecheap
- 登录 https://www.namecheap.com/ ,从页面左上角的用户名(Your Account)进入
Dashboard
(用户面板) - 选择所购买域名的右侧
MANAGE
页面,点进Advanced DNS
标签 - 点击醒目的红色按钮
+ ADD NEW RECORD
,先后一共需要ADD三条RECORD,分别是:类型
选A Record
;Host
填@
;Value
填192.30.252.153
类型
选A Record
;Host
填@
;Value
填192.30.252.154
类型
选CNAME Record
;Host
填www
;Value
填jeantse(这里需改成你的ID).github.io
- 网站会自动保存你ADD的条目。万一输错了可按右侧的叉叉删除重填。
- 填完后24H内生效,不着急就第二天再去看效果吧。
8.3 设置Github
- 在博客目录
F:\jeantse.blog
的\source
文件夹下新建一个名为CNAME
的文件,注意,不是CNAME.txt
,没有文件后缀! - 用
txt文本编辑软件(如notepad++)
打开CNAME
文件,输入自己购买的域名,保存(这个文件里就只有域名这一行文字) - 最后在Bash窗口输入
hexo g
和hexo d
,提交成功之后等待一段时间就能生效了
8.4 强制实施HTTPS
- 如果没有https,则别人点进你的网页可能会被提示“网页不安全,是否仍要浏览”
- Github能强制将域名从
http://
开头变成https://
开头,显得高大上 - 需要进入仓库的
Settings
页面(进入方法见前文3.3),勾选Enforce HTTPS
即可