在经过多个教程摸索和尝试后,发现手把手有时候挺坑人的,毕竟经验还是要自己攒,不然没踩的坑迟早要踩到,最终我的个人博客林深时见璐搭建完成,这篇教程会从本地博客建立到实现美观的网络博客进行记录分享,这篇博客也就会随着本博客的每一次升级完善而补充,希望能给想自建博客的朋友们提供帮助。
最初的诞生
我采用的搭建博客的方式是使用 GitHub Pages + Hexo 的方式,这个应该是我摸索之后认为的对新手最友好也最优质的方式,只需要投入时间学习和运营,就能拥有美观的个人博客。以下的1 - 3小点是博客的雏形构建[1]。
注册Github账号
要使用 GitHub Pages,首先你要注册一个GitHub账号。
安装必备软件
搭建博客
新建博客
配置GitHub,步骤如下:登录GitHub后新建项目(new repository),项目名由两部分组成即GitHub账号名和固定后缀
.github.io
,比如我的项目就是linwhitehat.github.io
,填写完点击创建项目(create repository)。配置GitHub SSH密钥,本地打开git bash,输入
ssh-keygen -t rsa -C "your's emaill address"
,其中your’s email address换成GitHub账号的邮箱地址,第一次点击回车键(Enter)会显示存储位置,第二次点击回车键会显示输入密钥,按照要求输入密钥两次(输入过程是看不到密钥的),之后在第一次显示的存储位置打开文件id_rsa.pub,复制文件内所有内容,在GitHub中点击头像可看的setting选项,在setting选项中可看到SSH and GPG keys选项,点击new SSH,然后输入title(方便密钥管理的名字),将刚才复制的内容粘贴到key中。创建本地仓库,在本地选择不包含中文的文件路径,新建一个文件夹,进入文件夹并点击右键选择git bash,输入以下命令进行设置:
1
2
3git init
git config --global user.name "Your's name"
git config --global user.email "Your's email address"其中
Your's name
和Your's email address
替换为GitHub账户名和对应邮箱地址。安装Hexo,按照之前方式进入git bash终端,输入
node
检测Node.js是否安装成功,若出现>
则表示正常,退出node模式,输入以下命令安装Hexo:1
2npm install -g hexo-cli
hexo version看到输出版本号等信息表示安装Hexo成功,在当前新建的文件夹下新建一个hexo文件夹,在hexo文件夹中进入git bash,输入以下命令配置hexo,完成之后,在浏览器输入
http://localhost:4000
,正常则可看到初始化的博客,到此便完成本地博客的建立。1
2
3
4hexo init
npm install
hexo g
hexo s配置Hexo到GitHub,在hexo文件夹下存在一个配置文件
_config.yml
,打开后可看到文件最后部分为:1
2deploy:
type:
将其修改为以下内容,其中
yourname
为GitHub账号名:1
2
3
4deploy:
type: git
repository: http://github.com/yourname/yourname.github.io.git
branch: master保存后,在当前文件夹打开git bash并输入:
1
2hexo g
hexo d若出现错误显示
ERROR Deployer not found: git
,则输入以下命令:1
2
3npm install hexo-deployer-git --save
hexo g
hexo d若弹出填写GitHub账号用户名和密码则正常填写,完成之后在浏览器输入
https://yourname.github.io
,yourname替换为GitHub账户名,即可通过互联网访问博客。- 如果不想自己新建,可以使用现有的他人博客项目进行改建,见第2小节。
使用已有的博客模板
- 注册完成后搜索
linwhitehat.github.io
进入我的仓库
点击右上角的 Fork 将我的仓库拉倒你的账号下
稍等一下,点击刷新,你会看到Fork了成功的页面
- 修改仓库名
点击settings进入设置
修改仓库名为
你的Github账号名.github.io
,然后 Rename这时你在在浏览器中输入
你的Github账号名.github.io
例如:linwhitehat.github.io
你将会看到如下界面
说明已经成功一半了😀当然,还需要修改博客的配置才能变成你的博客。
若是出现
则需要 检查一下你的仓库名是否正确
- 注册完成后搜索
修改博客配置
来到你的仓库,找到_config.yml
文件,这是网站的全局配置文件。
点击修改
然后编辑_config.yml
的内容
接下来我们来详细说说以下配置文件的内容:
基础设置说明
1 | # Site settings |
至此,一个初具形态的博客便生成了。
进阶
- 本文中新建仓库建立博客的方式,在本地建立仓库后,又再新建一个hexo文件,且将hexo配置托管到GitHub之后,GitHub项目便被hexo文件夹下的
.deploy_git
覆盖,之后修改博客维护项目只需要在hexo文件夹下的git bash进行hexo处理即可。 - 本文博客搭建的目录结构如下,相关博客搭建及优化教程中涉及的路径参照此目录树:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20# 博客根目录
|-- hexo
| |-- _config.yml
| |-- node_modules
| |-- public
| |-- scaffolds
| |-- source
| `-- themes
# 主题根目录
|-- themes
`-- next
|-- LICENSE.md
|-- README.md
|-- _config.yml
|-- docs
|-- languages
|-- layout
|-- scripts
`-- source - Hexo卸载方式,在git bash执行以下命令:博客相应的文件目录需要手动删除。
1
2npm uninstall hexo-cli -g
npm uninstall hexo -g
结束
博客搭建基本完成,但是博客中有很多地方可以自定义设计,这也是自建博客的初衷,熟悉Hexo和Next.Mist的配置后,会逐步优化博客样式。