平时没有什么做记录的习惯,但这习惯不太好,所以搭建了个博客来改掉这个不好的习惯。
在搭建博客的时候,我做了比较多的选择,先说说我选择每个不同的 cms 的取舍以及它们的优缺点。
Woredpress 其实是我优先考虑的 cms,但有一个问题,首先是服务器需要维护,其次呢毕竟我也是搞安全的是吧,确实存在被攻击的风险,所以这个方案被我放弃了。
其次我考虑的是 html 静态文件,但相对的首先也是需要维护服务器,也是一笔费用啊,众所周知我这种穷鬼肯定是舍不得出这个钱的是吧?而且 html 静态文件每次更新确实相对是比较麻烦了,所以这个方案也被我放弃了。
我个人对笔记工具的使用度是相对比较高的,这里我用过的有 Notion、印象笔记、有道笔记、为知笔记、OneNote、语雀等,我先讲讲各自的优缺点和使用感受吧
没错,在体验了那么多以后,我还是选择开了个微信公众号来记录和发布文章。
但是有一个问题,微信公众号每天只能推送一篇文章,而且微信公众号是不支持 Markdown 的,只能通过第三方平台进行转换,但是每次搞图片什么的麻烦死了。
说了这么多,终于回到了我们的主题,那就是:Hexo
Hexo 是一款高速、简洁且高效的博客框架。Hexo 使用 Markdown 解析文章,在几秒内即可利用靓丽的主题生成静态网页。并且 Hexo 有大量的插件作为支持,是不可多得的选择。
Hexo 其实就实现了我使用 Html 静态文件作为博客的想法,同时新增文档也不麻烦,还方便编辑,再加上我日常使用的笔记也恰好是 Markdown,所以只需要做一个很简单的移植即可把我的文章都移植到 Hexo 搭建的博客上。
进入 NVM-Windows 最新发布地址:https://github.com/coreybutler/nvm-windows/releases
选择最新发行版进行下载:
下载的 exe 可执行文件就直接打开,下载的 zip 压缩文件就先解压,然后打开点击安装
注意:NVM 的安装路径下不要有中文
NVM 配置文件地址也不要有中文
安装完成后,在 CMD 或者 Powershell 下输入 NVM,即可看到安装完成:
国内这边连接 NVM 和 Node 源比较慢,我们换成国内源:
# node使用淘宝源
node_mirror: http://npm.taobao.org/mirrors/node/
# npm使用淘宝源
npm_mirror: https://npm.taobao.org/mirrors/npm/
首先输入
nvm list
查看安装的版本,目前是没有安装任何版本的
之后我们安装 v12.21 版本的 node
nvm install 12.21
然后就安装好了 NVM
nvm use 12.21.0
选择要使用的 node 版本,即可
https://git-scm.com/download/win
下载后进行安装
许可声明
点击 “Next” 下一步
选择安装路径
根据自己的需要选择安装路径
选择安装组件
选择开始菜单目录
默认 Git 即可,直接 Next 下一步
选择 Git 文件默认的编辑器
很少用到,所以默认 Vim 即可,直接点击 Next 下一步
选择 Git 初始化分支的名称
选择使用 Git 的方式
选择 https 传输后端
让 Git 使用哪个 SSL/TLS 库来进行 HTTPS连接
配置结束行转换方式
Git 应该如何处理文本文件中的行结尾?
配置终端模拟器为使用 Git Bash
选择 Git 下拉默认行为
选择 Git 凭证小助手
Credential helper是帮我们保存凭证(用户密码)他有很多存储模式如:cache,store,manager 和 osxkeychain,默认 wincred,这里根据自己需要选择。
配置额外特性选项
启用实验配置选项
启用对伪控制台的实验性支持,(新)这允许在Git Bash窗口中运行原生控制台程序,如 Node 或 Python,而不使用 winpty,但它仍然有已知的 bug,一般用不到 可不勾选
点击 Install 即可安装完毕。
安装完成
Git Bash,是Git配套的一个控制台
启用
在上面的环境都安装完毕后,可以直接使用命令行安装 Hexo
npm install hexo-cli -g
安装完成后查看版本,如果弹出了版本号就是安装成功了
hexo -v
Mac 和 Linux 都可以使用编译安装的方法安装 NVM,但 Mac 用户还是推荐使用 Homebrew 来安装 NVM。
本教程来自:https://github.com/nvm-sh/nvm
要安装和更新 NVM,可以使用安装脚本 https://github.com/nvm-sh/nvm/blob/v0.39.3/install.sh。可以手动下载脚本或使用 Curl 和 Wget 命令进行下载:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
运行上述任一命令都会下载脚本并运行它。
该脚本将 nvm 存储库克隆到 ~/.nvm
,并尝试将下面代码段中的源代码行添加到正确的配置文件(~/.bash_profile
、~/.zshrc
、~/.profile
或~/.bashrc
)
之后到环境配置中追加下述内容:
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
安装完成后,在终端输入 nvm
未报错 command not find
即为安装成功
在终端输入如下内容进行设置国内源
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node/
使用如下命令安装 Node
nvm install 12.21
可以测试一下是否可用
nvm list
nvm use 12.21
node -v
yum install git -y
在 Centos 下可以使用 yum 安装程序
apt install git -y
在 Ubuntu 等 Debian 架构下可以使用 apt 安装程序
在上面的环境都安装
在上面的环境都安装完毕后,可以直接使用命令行安装 Hexo
npm install hexo-cli -g
安装完成后查看版本,如果弹出了版本号就是安装成功了
hexo -v
在安装 Homebrew 的情况下,终端输入:
brew install nvm
即可完成安装
在终端输入如下内容进行设置国内源
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node/
使用如下命令安装 Node
nvm install 12.21
可以测试一下是否可用
nvm list
nvm use 12.21
node -v
在 Mac 下是会默认安装 Git 的
git --version
可使用上面的命令查看是否安装,如果已经安装会输出 git 的版本
如果没有安装的话,会弹出上述窗口进行安装
点击同意即可
可以利用 Brew 工具包管理器进行 Git 安装,安装方法我会在另一篇 Mac M1 渗透测试环境搭建的文章中写,我就不在这里赘述了
brew install git
然后等待安装完成就行
在上面的环境都安装完毕后,可以直接使用命令行安装 Hexo
npm install hexo-cli -g
安装完成后查看版本,如果弹出了版本号就是安装成功了
hexo -v
创建一个文件夹,进入文件夹后然后使用 hexo 进行初始化
hexo init
然后就创建完成了我们的初始化博客
hexo s
即可在本地部署博客,即可在浏览器中打开
我们来创建第一篇内容
hexo new test1
hexo s
然后再用 hexo g 编译博客
然后使用 hexo s 在本地部署博客
就可以看到我们的第一篇博客
博客搭建好了,接下来需要换一个满意的博客主题
https://hexo.io/themes/
可以在上面选择喜欢的主题
这里我使用的是 Indigo
https://github.com/yscoder/hexo-theme-indigo
进入到 hexo 目录中的 themes 目录中
git clone https://github.com/yscoder/hexo-theme-indigo
将主题下载到当前目录下
返回 hexo 的根目录中,打开配置文件 _config.yml
,去修改内容
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
将第 100 行的 theme: landscape
修改为 hexo-theme-indigo
主题默认使用 less 作为 css 预处理工具
npm install hexo-renderer-less --save
用于生成 rss
npm install hexo-generator-feed --save
用于生成静态站点数据,用于站内搜索的数据源
npm install hexo-generator-json-content --save
可选,不安装时会请求 jiathis Api 生成二维码
npm install hexo-helper-qrcode --save
这个时候直接运行一下
hexo g
hexo s
发现报错了,网页也无法访问
经过大量的踩坑和排查,最后发现是因为默认安装的为 hexo 5
,而它不再把 _
作为全局变量
https://hexo.io/docs/variables#Global-Variables
这里切换为 hexo 4
即可解决这个问题
npm uninstall hexo --save
npm install [email protected]^4.0.0 --save
然后再尝试搭建服务器
hexo g
hexo s
成功搭建并访问
hexo new page tags
修改 hexo/source/tags/index.md
的元数据
layout: tags
comments: false
---
仅 card theme 支持。
hexo new page categories
修改 hexo/source/categories/index.md
的元数据
layout: categories
comments: false
---
为了得到更好的使用体验,以下内容请务必填写完整,因为这些内容会在主题中得到展示。更多
title: your title
subtitle: your subtitle
description: your description
keywords: your keywords
author: your name
email: your email
url: your site url
参考 hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 0
为了节约资源,可以对 jsonContent 插件生成的数据字段进行配置,减少数据文件大小。参考 hexo-generator-json-content
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: true
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
编辑主题配置文件,themes/indigo/_config.yml
。
默认配置如下
menu:
home:
text: 主页
url: /
archives:
url: /archives
tags:
url: /tags
github:
url: https://github.com/yscoder
target: _blank
weibo:
url: http://www.weibo.com/ysweb
target: _blank
link:
text: 测试
url: /
添加新菜单项时,在 menu 下增加子属性即可。属性说明如下:
menu:
link: # fontawesome图标,省略前缀,本主题前缀为 icon-,必须
text: About # 菜单显示的文字,如果省略即默认与图标一致,首字母会转大写
url: /about # 链接,绝对或相对路径,必须
target: _blank # 是否跳出,省略则在当前页面打开
fontawesome 图标已集成到主题中,你可以到 这个页面 挑选合适的图标。
站点 logo,显示在浏览器当前标签页左上角。
favicon: /favicon.ico
位于左侧菜单上方(官方介绍,但我测试后发现无效)
avatar: /img/logo.jpg
头像下方
email: [email protected]
设置 Android L Chrome 浏览器状态栏颜色,不需要可去除此项或设为 false
。
color: '#3F51B5'
自定义归档、标签、分类页的大标题。
tags_title: Tags
archives_title: Archives
categories_title: Categories
可以在 Markdown 文件中加 <!--more-->
以分割摘要与文章正文。未设置时,按 excerpt_length
设置截取。
# 文章摘要渲染方式: 为 true 时将渲染为 html,否则为文本
excerpt_render: false
# 截断长度
excerpt_length: 200
# 文字正文页链接文字
excerpt_link: 阅读全文...
开启后,使你的站点支持公式渲染,by mathjax。 请按需开启,因为此项需要加载额外的 js 文件。
mathjax: false
文章分享开关,by jiathis-api。
share: true
默认开启
reward:
title: 谢谢大爷~ #显示的文字
wechat: /img/wechat.jpg #微信,关闭设为 false
alipay: /img/alipay.jpg #支付宝,关闭设为 false
此外在 crad theme 中,可以通过在 markdown 头部添加 reward: false
来控制某些不想开启打赏的页面。
关闭
reward: false
二维码请自行从微信、支付宝中下载。当两个二维码同时存在时,为保持显示效果的一致性,注意截图时的边框留白保持一致。必要时可借助PS等图片处理工具进行图片大小裁剪、压缩等。
是否开启搜索
search: true
开启后,文章页在大屏下会隐藏左侧菜单,专注阅读。
hideMenu: true
开启文章内容导航。
#toc: false #关闭
toc:
list_number: false # 决定导航使用的标签, true 为 ol, false 为 ul。
文章页版权声明内容,hexo中所有变量及辅助函数等均可调用,具体请查阅 hexo.io。
copyright: 这里写留言或版权声明:<a href="<%- url_for(page.path) %>" target="_blank" rel="external"><%- url %></a>
设置 less 编译时的入口文件路径,hexo-renderer-less。
less:
compress: true # 是否压缩css
paths:
- source/css/style.less
集成了 disqus、友言、gitment 和 valine,开启其一即可。
集成的有谷歌、腾讯、百度和 CNZZ,请填写你的站点标识。
google_analytics: key
tajs: 站点id
baidu_tongji: 站点id
cnzz: 站点id
google_site_verification: false
让搜索引擎重定向你的不同域名、不同子域、同域不同目录的站点到你期望的路径。使用规范网址
canonical: http://imys.net
since_year: 2006
用户页面中作者相关的描述性文字,如不需要设为 false
about: 用户页面中作者相关的描述性文字,如不需要设为 false
开启后将使用 unpkg cdn 最新的主题样式,如果想让你的自定义样式生效,把此项设为 false
。
cdn: true
文章图片灯箱效果。
lightbox: true
ICP_license: 京ICP备1234556号-1
使用 Github 搭建博客,首先咱们肯定得需要个 Github 账号吧?教人教到底,咱们先去注册个账号
点 Sign up
注册
输入注册的邮箱
输入账号密码后注册即可
然后会向邮箱发送一封邮件,里面一个验证码,输入后即可注册
注册并登录后看到的应该是这种界面,因为我的账号使用了很久了,所以这里有一些东西,我就打个马赛克了
点击 New repository
创建一个新的仓库
这里的仓库名是 xxx.github.io
,其中 xxx 是你的仓库名,比如我的就是 LucifielHack。
必须得按照这个格式设置,否则是无法解析的
点击创建后,会进入这个界面,这也是在告诉我们如何设置
生成 SSH
添加到 Github
,连接 Github
与本地
右键桌面打开 Git Bash
,然后输入下面的命令:
git config --global user.name "yourname"
git config --global user.email "youremail"
注意:第一次使用 git
后需要将用户名和邮箱进行初始化
这里的 name 和 email 分别是 Github 的用户名和邮箱,根据自己的注册信息填写就可以了
git config user.name
git config user.email
可以用上面两条命令确认自己是否输入正确
然后创建 SSH
,一路回车即可
ssh-keygen -t rsa -C "youremail"
ssh
,简单来讲,就是一个秘钥,其中,id_rsa
是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub
是公共秘钥,可以随便给别人看。把这个公钥放在GitHub
上,这样当你链接GitHub
自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git
上传你的文件到GitHub
上。
这个时候它会告诉你已经生成了.ssh
的文件夹。在你的电脑中找到这个文件夹。或者git bash
中输入
cat ~/.ssh/id_rsa.pub
将 id_rsa.pub
的内容复制好
挨个点击 Settings --> Deploy keys --> Add deploy key
然后名字随便取一个就行,把 id_rsa.pub
的内容粘贴到 Key 中
在 git bash
中输入 ssh -T [email protected]
,如果出现 Hi xxx/xxx.github.io! You've successfully authenticated,but Github does not provide shell access.
即为设置成功
打开博客根目录下的 _config.yml
文件
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: ''
这是最后一部分,102 行的内容,将它修改为
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: https://github.com/LucifielHack/LucifielHack.github.io
branch: master
其中的 repository 修改为自己的 Github 仓库地址即可
然后需要安装 deploy-git
插件,也就是部署到 Github 的命令,这样才可以使用命令行部署到 Github
npm install hexo-deployer-git --save
然后
hexo clean
hexo g
hexo d
即可发布到 Github
然后等待几分钟即可更新成功
接着去 http://yourname.github.io 这个网站即可看到你的博客
大家如果有自己的域名的话,可以设置用自己的域名来解析
点击 Settings --> Pages --> Custom domain
将 Custom domain 中的地址设置为自己的域名
然后去自己的域名商添加一条解析记录
然后就可以通过自己的域名访问到 Github 搭建的 Hexo 博客了