从学生时代开始就有做笔记和总结的习惯,以前的笔记都是在本子上,经常不知不觉就做了很多笔记,每次回头看到那么多工整漂亮(嗯,就是自恋>o<)的笔记成就感就油然而生。现在已经是信息时代了,购物也从线下搬到线上,想必笔记也应该如此。俗话说,“好记性不如烂笔头”,希望自己搭建的这个博客能够成为自己以后的笔记本。
本人博客预览:cloudyunfan@github.io
搭建环境:Windows10
前提条件
拥有github账户
已经有github账户,如果没有的话,先注册一个,参考这个链接GitHub注册及使用流程,注意邮箱要确认注册,否则无法新建repository。
踩坑提醒:
github设置公钥以后,第一次使用时出现以下提示,记得选择yes:
这个提示出现的原因是:第一次连接远程主机的时候,为了避免中间人攻击——如果有人中间截获了你的登录请求,并且模拟ssh服务端的话,你的密码就会泄漏,所以ssh要询问一下,选择yes确认把服务端的信息加入本地的~/.ssh/known_hosts文件,下次再连接同一台主机的时候则不会再询问了。(参考如何用ssh key在网络上畅通无阻)
必要软件
Notepad++
Notepad++比 Windows中的Notepad(记事本)强大,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码。良心软件,非常好用,实力避坑!
Haroopad/Typora
Windows环境下比较好的Markdown文本编辑器,用于编写博客及修改部分hexo文档。
环境准备
node.js环境搭建
在nodejs官网下载新版的node.js环境安装,安装过程一路next即可,除了下图的选择要注意一下:
安装完按住Win+R打开cmd,运行node -v和npm -v查看node.js和npm的版本信息,出现以下界面则说明安装成功,否则请检查前面的安装过程,看是否有所遗漏:
Git环境搭建
首先下载Git安装文件:https://git-scm.com/downloads
按照以下步骤安装:
和Node.js一样,大部分情况都只需要保持默认设置,但是出于操作方便考虑,建议PATH选项按照下图选择:
上图选择的选项的解释是:出于安全考虑,只有在Git Bash中才能进行Git的相关操作。按照上图进行的选择,将会使得Git安装程序在系统PATH中加入Git的相关路径,使得你可以在cmd界面下调用Git,不用打开Git Bash了。
同样,在cmd窗口运行git –version,出现下图的版本信息则说明安装成功:
博客正式搭建
github设置
创建代码库
在Repository name下填写yourname.github.io,Description 下填可以写一些描述,如图:
踩坑提醒:
图中的yourname必须为github的用户名,在这里就是cloudyunfan,否则在这里就无法用
https://cloudyunfan.github.io
直接访问,而只能用https://cloudyunfan.github.io/yourname.github.io
访问。开启gh-pages功能
点击界面右侧的Settings,可以看到库的setting页面,向下拖动,直到看见GitHub Pages
在GitHub Page中选择master分支:
去到你本地想建立项目的文件夹,克隆新建的库到本地(使用公钥注意用SSH链接)
1
$ git clone https://github.com/yourname/yourname.github.io
进入项目文件夹,增加一个index.html文件:
1
2$ cd username.github.io
$ echo "Hello World" > index.html把变更推送到github上:
1
2
3$ git add --all
$ git commit -m "Initial commit"
$ git push -u origin master接下来就是可以访问
https://yourname.github.io
页面啦,此页面出现的是index.html的Hello World。如果可以正常访问页面,那么Github这边的配置则结束了。接下来讲解hexo这边的配置。
hexo配置
简介
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
配置
假设我们在e盘新建了一个文件夹hexo,首先在cmd或MINGW64窗口(Git Bash打开)运行一下命令:
1 | $ cd e:/hexo |
blog文件夹是我们通过初始化命令hexo init自动建立的。在cmd窗口运行hexo -v,出现下图的版本信息则说明安装成功:
1 | $ hexo -v |
安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件:
1 | $ hexo init blog |
新建完成后,blog文件夹的目录如下:
1 | . |
接下来,hexo生成静态文件:
1 | $ hexo g # 或者hexo generate |
网页运行http://localhost:4000/ 可以看到如下页面,则说明配置成功:
到目前为止,hexo在本地电脑的安装配置已经全部结束,接下面讲解如何将hexo和github page关联起来。
踩坑提醒(坑有点多):
hexo g
生成静态文件的时候报错1
2
3$ hexo g
ERROR Local hexo not found in E:\hexo\blog
ERROR Try running: 'npm install hexo --save'
解决方法:删除node_modules文件夹 ,执行npm install
,详情可参考https://blog.csdn.net/xcantloadx/article/details/78296227
hexo g
报错1
2
3
4
5$ npm install
npm WARN engine hexo@3.8.0: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
npm WARN deprecated titlecase@1.1.2: no longer maintained
npm WARN engine hexo-fs@0.2.3: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
npm WARN engine nunjucks@3.1.4: wanted: {"node":">= 6.9.0 <= 11.1.0"} (current: {"node":"4.2.3","npm":"2.14.7"})仔细看警告,可以发现警告的意思是node.js环境的版本过低,这在安装的时候没有问题,可是后续会导致hexo命令失效的问题:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15$ hexo g
Usage: hexo
Commands:
help Get help on a command
init Create a new Hexo folder
migrate Migrate your site from other system to Hexo
version Display version information
Global Options:
--debug Display all verbose messages in the terminal
--safe Disable all plugins and scripts
For more help, you can use hexo help [command] for the detailed information
or you can check the docs: http://zespia.tw/hexo/docs/
解决方法:下载新版本的node.js安装
hexo d
的时候找不到部署器(后续部署的坑)1
2$ hexo d
ERROR Deployer not found: git解决方法:需要提前安装一个扩展
npm install hexo-deployer-git --save
安装webpack出现警告
1
2
3
4$ npm install hexo-cli -g
C:\Users\yunfa\AppData\Roaming\npm\hexo -> C:\Users\yunfa\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})出现原因:fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,忽略即可。
关联hexo与github page
配置Git个人信息(以前配置过则不用配置)
1 | git config --global user.name "cloudyunfan" |
可以通过$ git config --list
查看Git配置
配置Deployment
找到路径e:/hexo/blog/下的_config.yml文件,配置deploy如下
1 | deploy: |
写博客
执行以下命令新建博客:
hexo new post "your title"
然后在我的电脑的目录下e:\hexo\blog\source\ _posts 将会看到 your title.md
文件,用MarkDown编辑器编辑文章,运行生成、部署命令:
1 | hexo g # 生成 |
等价于hexo d -g #在部署前先生成
命令。部署成功后访问https://yourname.github.io
将可以看到新的文章。
主题配置
Hexo安装过后,默认的主题是landscape,有两个比较好的主题推荐给大家。 Yilia 主题是为 hexo 2.4+制作的主题, 崇尚简约优雅,以及极致的性能。NexT主题简洁美观,是目前Github上Star最高的Hexo主题,支持若干种不同的风格,这个主题确实很成熟,优化、配置、扩展很多都集成了,比较简单。下面以NexT主题为例配置主题。
配置NexT主题
安装主题
Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 再修改配置文件即可。
1 | $ cd blog |
启用主题
当克隆/下载完成后,注意blog文件夹中有两个_config.yml
文件,分别为站点配置文件和主题配置文件
1 | . |
打开站点配置文件, 找到 theme 字段,并将其值更改为 next。 启用 NexT 主题
1 | theme: next |
NexT 主题安装完成后我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好先用 hexo clean
来清除 hexo 的缓存。
验证主题
启动hexo本地站点并开启调试模式:
1 | hexo s –debug |
使用调试模式的好处是可以将详细消息记录到终端和debug.log
文件,在服务启动的过程,注意观察终端输出是否有异常信息,如果碰到问题,这些信息将帮助我们更好的定位错误。当终端输出:
1 | INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. |
我们就可以使用浏览器访问http://localhost:4000
,如果出现以下外观(NexT 默认的 Scheme是Muse),则说明主题安装成功:
hexo的scheme
Scheme | 样式 |
---|---|
Muse | 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白 |
Mist | Muse 的紧凑版本,整洁有序的单栏外观 |
Pisces | 双栏 Scheme,小家碧玉似的清新 |
Gemini | 与Pisces相似,阴影效果有所区别 |
1 | # Schemes 注释掉不用的Schemes |
基础信息设置
设置主题的语言、博客名字、站点描述、作者昵称等信息,编辑站点配置文件
1 | # Site |
目前NexT 支持的语言可以参考NexT官网
设定菜单内容
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下图标模糊的问题。
编辑主题配置文件, 菜单内容的设置格式是:item name: link
。其中 item name
是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。||
运算符后面代表的是图标名称,如没有设置或者设置无效的 Font Awesome 图标名字,则会显示问号图标。
1 | menu: |
NexT 默认的菜单项有(斜体表示的页面要手动创建)
键值 | 设定值 | 显示文本(简体中文) |
---|---|---|
home | home: / |
主页 |
archives | archives: /archives |
归档页 |
categories | categories: /categories |
分类页 |
tags | tags: /tags |
标签页 |
about | about: /about |
关于页面 |
commonweal | commonweal: /404.html |
公益 404 |
设置菜单项的显示文本
在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的languages/{language}.yml
文件
({language}
为你所使用的语言)。
以简体中文为例,若你需要添加一个菜单项,比如 psychology
。那么就需要修改简体中文对应的翻译文件languages/zh-CN.yml
,在 menu
字段下添加一项:
1 | menu: |
请注意键值(如
home
)的大小写要严格匹配
设置侧栏
默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。 可以通过修改主题配置文件中的 sidebar
字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。
设置侧栏的位置,修改 sidebar.position
的值,支持的选项有:
- left - 靠左放置
- right - 靠右放置
1 | sidebar: |
目前仅 Pisces Scheme 支持
position
配置。影响版本5.0.0及更低版本。
设置侧栏显示的时机
修改 sidebar.display
的值,支持的选项有:
post
- 默认行为,在文章页面(拥有目录列表)时显示always
- 在所有页面中都显示hide
- 在所有页面中都隐藏(可以手动展开)remove
- 完全移除
1 | sidebar: |
已知侧栏在
use motion: false
的情况下不会展示。 影响版本5.0.0及更低版本。
设置头像
编辑主题配置文件, 修改字段 avatar
, 值设置成头像的链接地址。其中,头像的链接地址可以是:
- 完整的互联网 URI:
http://example.com/avatar.png
- 站点内的地址:将头像放置主题目录下的
source/uploads/
(新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png
或者 放置在source/images/
目录下 配置为:avatar: /images/avatar.png
1 | avatar: |
添加插件
为了我们的博客能够更好的被搜索引擎收录以及被其他人订阅,我们可以添加sitemap、baidusitemap和feed插件,切换到你本地的hexo 的blog目录,在命令行窗口,输入命令:
1 | $ npm install hexo-generator-feed -save |
修改站点配置文件,增加以下内容:
1 | # Extensions |
部署hexo d -g
,就可以访问 https://cloudyunfan.github.io/atom.xml 和 https://cloudyunfan.github.io/sitemap.xml 、 https://cloudyunfan.github.io/baidusitemap.xml 这三个文件了。
参考资料
https://blog.csdn.net/gdutxiaoxu/article/details/53576018