从学生时代开始就有做笔记和总结的习惯,以前的笔记都是在本子上,经常不知不觉就做了很多笔记,每次回头看到那么多工整漂亮(嗯,就是自恋>o<)的笔记成就感就油然而生。现在已经是信息时代了,购物也从线下搬到线上,想必笔记也应该如此。俗话说,“好记性不如烂笔头”,希望自己搭建的这个博客能够成为自己以后的笔记本。
本人博客预览:[email protected]
搭建环境:Windows10
已经有github账户,如果没有的话,先注册一个,参考这个链接GitHub注册及使用流程,注意邮箱要确认注册,否则无法新建repository。
踩坑提醒:
github设置公钥以后,第一次使用时出现以下提示,记得选择yes:
这个提示出现的原因是:第一次连接远程主机的时候,为了避免中间人攻击——如果有人中间截获了你的登录请求,并且模拟ssh服务端的话,你的密码就会泄漏,所以ssh要询问一下,选择yes确认把服务端的信息加入本地的~/.ssh/known_hosts文件,下次再连接同一台主机的时候则不会再询问了。(参考如何用ssh key在网络上畅通无阻)
Notepad++
Notepad++比 Windows中的Notepad(记事本)强大,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码。良心软件,非常好用,实力避坑!
Haroopad/Typora
Windows环境下比较好的Markdown文本编辑器,用于编写博客及修改部分hexo文档。
在nodejs官网下载新版的node.js环境安装,安装过程一路next即可,除了下图的选择要注意一下:
安装完按住Win+R打开cmd,运行node -v和npm -v查看node.js和npm的版本信息,出现以下界面则说明安装成功,否则请检查前面的安装过程,看是否有所遗漏:
首先下载Git安装文件:https://git-scm.com/downloads
按照以下步骤安装:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ka7YWOwv-1587783326388)(https://cloudyunfan.github.io/images/Git2.jpg)]
和Node.js一样,大部分情况都只需要保持默认设置,但是出于操作方便考虑,建议PATH选项按照下图选择:
上图选择的选项的解释是:出于安全考虑,只有在Git Bash中才能进行Git的相关操作。按照上图进行的选择,将会使得Git安装程序在系统PATH中加入Git的相关路径,使得你可以在cmd界面下调用Git,不用打开Git Bash了。
同样,在cmd窗口运行git --version,出现下图的版本信息则说明安装成功:
创建代码库
在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分支:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpoqwiiW-1587783326404)(https://cloudyunfan.github.io/images/master.png)]
去到你本地想建立项目的文件夹,克隆新建的库到本地(使用公钥注意用SSH链接)
$ git clone https://github.com/yourname/yourname.github.io
进入项目文件夹,增加一个index.html文件:
$ cd username.github.io
$ echo "Hello World" > index.html
把变更推送到github上:
$ 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 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
假设我们在e盘新建了一个文件夹hexo,首先在cmd或MINGW64窗口(Git Bash打开)运行一下命令:
$ cd e:/hexo
$ npm install hexo-cli -g
$ hexo init blog
blog文件夹是我们通过初始化命令hexo init自动建立的。在cmd窗口运行hexo -v,出现下图的版本信息则说明安装成功:
$ hexo -v
hexo: 3.8.0
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.13.0
v8: 6.8.275.32-node.36
uv: 1.23.2
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0i
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e
安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件:
$ hexo init blog
$ cd blog
$ npm install
新建完成后,blog文件夹的目录如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
接下来,hexo生成静态文件:
$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server,可以在http://localhost:4000/ 查看
网页运行http://localhost:4000/ 可以看到如下页面,则说明配置成功:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lA4opxtK-1587783326407)(https://cloudyunfan.github.io/images/hexo.png)]
到目前为止,hexo在本地电脑的安装配置已经全部结束,接下面讲解如何将hexo和github page关联起来。
hexo g
生成静态文件的时候报错
$ 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
报错
$ npm install
npm WARN engine [email protected]: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
npm WARN deprecated [email protected]: no longer maintained
npm WARN engine [email protected]: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
npm WARN engine [email protected]: wanted: {"node":">= 6.9.0 <= 11.1.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
仔细看警告,可以发现警告的意思是node.js环境的版本过低,这在安装的时候没有问题,可是后续会导致hexo命令失效的问题:
$ 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
的时候找不到部署器(后续部署的坑)
$ hexo d
ERROR Deployer not found: git
解决方法:需要提前安装一个扩展npm install hexo-deployer-git --save
安装webpack出现警告
$ 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: [email protected] (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
出现原因:fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,忽略即可。
git config --global user.name "cloudyunfan"
git config --global user.email "[email protected]"
可以通过$ git config --list
查看Git配置
找到路径e:/hexo/blog/下的_config.yml文件,配置deploy如下
deploy:
type: git
repo: [email protected]:cloudyunfan/cloudyunfan.github.io.git #github上的仓库SSH地址
branch: master
执行以下命令新建博客:
hexo new post "your title"
然后在我的电脑的目录下e:\hexo\blog\source\ _posts 将会看到 your title.md
文件,用MarkDown编辑器编辑文章,运行生成、部署命令:
hexo g # 生成
hexo d # 部署
等价于hexo d -g #在部署前先生成
命令。部署成功后访问https://yourname.github.io
将可以看到新的文章。
Hexo安装过后,默认的主题是landscape,有两个比较好的主题推荐给大家。 Yilia 主题是为 hexo 2.4+制作的主题, 崇尚简约优雅,以及极致的性能。NexT主题简洁美观,是目前Github上Star最高的Hexo主题,支持若干种不同的风格,这个主题确实很成熟,优化、配置、扩展很多都集成了,比较简单。下面以NexT主题为例配置主题。
Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 再修改配置文件即可。
$ cd blog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
当克隆/下载完成后,注意blog文件夹中有两个_config.yml
文件,分别为站点配置文件和主题配置文件
.
├── _config.yml # 站点配置文件
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
├── landscape
└── next
└── _config.yml # 主题配置文件
打开站点配置文件, 找到 theme 字段,并将其值更改为 next。 启用 NexT 主题
theme: next
NexT 主题安装完成后我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好先用 hexo clean
来清除 hexo 的缓存。
启动hexo本地站点并开启调试模式:
hexo s –debug
使用调试模式的好处是可以将详细消息记录到终端和debug.log
文件,在服务启动的过程,注意观察终端输出是否有异常信息,如果碰到问题,这些信息将帮助我们更好的定位错误。当终端输出:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
我们就可以使用浏览器访问http://localhost:4000
,如果出现以下外观(NexT 默认的 Scheme是Muse),则说明主题安装成功:
Scheme | 样式 |
---|---|
Muse | 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白 |
Mist | Muse 的紧凑版本,整洁有序的单栏外观 |
Pisces | 双栏 Scheme,小家碧玉似的清新 |
Gemini | 与Pisces相似,阴影效果有所区别 |
# Schemes 注释掉不用的Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
设置主题的语言、博客名字、站点描述、作者昵称等信息,编辑站点配置文件
# Site
title: 为梦想加油!!! #博客名
subtitle: 大柔非柔,至刚无刚
description: 安而后能虑,虑而后能得 #站点描述可以是你喜欢的一句签名:)
keywords:
author: ** #昵称
language: zh-CN #设置语言为简体中文
timezone:
目前NexT 支持的语言可以参考NexT官网
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下图标模糊的问题。
编辑主题配置文件, 菜单内容的设置格式是:item name: link
。其中 item name
是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。||
运算符后面代表的是图标名称,如没有设置或者设置无效的 Font Awesome 图标名字,则会显示问号图标。
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
schedule: /schedule/ || calendar
sitemap: /sitemap.xml || sitemap
commonweal: /404/ || heartbeat
psychology: /psych/
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
字段下添加一项:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
psychology: 心理学
请注意键值(如
home
)的大小写要严格匹配
默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。 可以通过修改主题配置文件中的 sidebar
字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。
设置侧栏的位置,修改 sidebar.position
的值,支持的选项有:
sidebar:
position: left
目前仅 Pisces Scheme 支持
position
配置。影响版本5.0.0及更低版本。
设置侧栏显示的时机
修改 sidebar.display
的值,支持的选项有:
post
- 默认行为,在文章页面(拥有目录列表)时显示always
- 在所有页面中都显示hide
- 在所有页面中都隐藏(可以手动展开)remove
- 完全移除sidebar:
display: post
已知侧栏在
use motion: false
的情况下不会展示。 影响版本5.0.0及更低版本。
编辑主题配置文件, 修改字段 avatar
, 值设置成头像的链接地址。其中,头像的链接地址可以是:
http://example.com/avatar.png
source/uploads/
(新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png
或者 放置在 source/images/
目录下 配置为:avatar: /images/avatar.png
avatar:
url: http://example.com/avatar.png
为了我们的博客能够更好的被搜索引擎收录以及被其他人订阅,我们可以添加sitemap、baidusitemap和feed插件,切换到你本地的hexo 的blog目录,在命令行窗口,输入命令:
$ npm install hexo-generator-feed -save
$ npm install hexo-generator-sitemap -save
$ npm install hexo-generator-baidusitemap -save
修改站点配置文件,增加以下内容:
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidusitemap
# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# sitemap
sitemap:
path: sitemap.xml
# baidusitemap
baidusitemap:
path: baidusitemap.xml
部署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
https://www.jianshu.com/p/1c2e9f19d14f
http://theme-next.iissnan.com