这篇文章是关于搭建博客的大体流程、个人理解和碰到的疑难病症。
写这篇文章的两个原因:一方面提供给想要拥有专属于自己小领地的同学做参考,另一方面通过总结归纳,帮助自己更好地理解搭建博客的整个思路和流程。
一、前言
1. 为什么用GitHub+Hexo搭建博客
简单来说,Hexo框架用来生成网页,GitHub Pages用来展示网页。这就省去了购买、维护服务器的成本,极大地节约了自己手动实现前后端、数据库花费的时间。
2. 涉及的技术知识
- Node.js:运行在服务端的JavaScript。换言之,即一种JavaScript的运行环境,使得JavaScript能够脱离浏览器运行
- Git:分布式版本管理工具
- npm:包管理工具。(一般安装完NodeJs之后,npm是附带安装上去的)
- Hexo:一个快速、简洁高效的博客框架,基于Node.js
- GitHub Page:面向用户、组织和项目开放的公共静态页面搭建托管服务,站点免费托管在Github上
- Markdown编辑器:轻量级纯文本格式的标记语言,使文本具有一定的样式
二、配置环境
1. Git
官方下载地址:https://git-scm.com/download/win
安装时根据自身需求勾选。
完成后,在cmd命令行在输入 git —version,若出现版本号,则说明Git安装成功。
2. Node.js
官方下载地址:https://nodejs.org/en/
安装时根据自身需求勾选。
完成后,在cmd命令行在输入 node -v,若出现版本号,则说明Node.js安装成功。
3. Hexo
① 在自己认为合适的地方新建一个Hexo文件夹用于存储相关本地文件。比如我的存储路径为D:\blog\hexo
② 进入hexo文件夹,右击,打开Git Bash Here。
注:Git命令框中,ctrl+c为强制中断命令,如果要用到复制粘贴,请右击copy/paste。
③ 在弹出的Git命令框中输入npm install -g hexo,安装hexo
此时,第一个坑出现在了我的面前…
经过长时间的等待依旧没有结果,有时候还会出现以下报错信息:npm ERR! Unexpected end of JSON input while parsing near ‘…eCount”:11,”unpackedS’,网上搜了很久,终于找到了原因:原始的镜像源无法使用,需要换成其他可用的源。于是我换成了淘宝的源:npm config set registry https://registry.npm.taobao.org,问题解决!可通过npm config get registry命令查看现在使用的镜像源。
不存在以上问题的小伙伴自行忽略。
④ 输入hexo init,初始化hexo
刚爬出第一个坑,第二个坑接踵而至…报错:’hexo’ 不是内部或外部命令,也不是可运行的程序。还好哥有经验,这大概是环境变量的问题。找到hexo的bin目录,我的路径具体为D:\blog\hexo\node_modules\hexo\node_modules.bin。把它添加到系统环境变量的path中就成功解决了。
不存在以上问题的小伙伴自行忽略。
经过漫长的等待,突然出现”Start blogging with Hexo!”,鸡冻有木有!!!
此刻文件夹里多了好多东西,每个文件的具体作用稍后解释。
至此,完成了对hexo的配置。
注意:所有的Git Bash操作都要在一开始新建的hexo目录下进行!
三、搭建博客
1. Hexo本地初体验
① 输入hexo g,生成静态文件
② 输入hexo s,将文件部署到本地服务器
默认情况下,端口为4000,访问地址为:http://localhost:4000/。
由于4000端口比较常用,若已被其他进程占用,则会访问失败,此时可以手动设置端口号,例如hexo -p 5678 server,此时地址为:http://localhost:5678/
打开浏览器,输入地址,就可以看到博客的原始形态啦!有一篇Hello World的文章是因为在初始化时为我们生成的。
注:此时只是在本地预览,还没有实现公网访问。访问页面的时候不能关闭Git命令框也不能按Ctrl + C停止服务。
2. 部署Github Page
GitHub官网:https://github.com/
① 登录官网注册并创建仓库
注册完账户后创建仓库,此仓库名必须和自己的GitHub用户名一致。比如用户名为abc,则仓库名需设为abc.github.io。
一个基于GitHub服务器的网站就已经自动部署成功了,进入仓库右侧settings,下拉到Github Pages,可以看到这么一句话:”Your site is ready to be published at https://abc.github.io/",将来你个人博客的公网访问地址就是这个。
仓库创建完成后,网站可能不会立即生效,需要等待几分钟甚至几十分钟。
至此已经实现了:本地访问个人博客、公网访问GitHub Page。接下来就是对两者建立关联,最终实现公网访问个人博客。
3. 将Hexo和Github Page建立关联,实现公网访问
① 设置Git的user name和email
(1) 打开Git Bash,输入git config —global user.name “abc”,引号里换为你的github用户名,非昵称
(2) git config —global user.email “xxx@qq.com”,引号里换为你的github邮箱
② 配置SSH
每次从本地提交项目到GitHub,都需与GitHub仓库建立连接。
建立连接的两种方式:
1.HTTPS:每次上传都需输入账号密码。
2.SSH:配置完成后,每次上传无需输入账号密码。
在这里我选用第二种方法,原因:安全+一劳永逸。
(1) 打开Git Bash,输入cd ~/.ssh,检查是否有此文件夹。若有id_rsa和id_rsa.pub文件,可跳过第(2)步
(2) 输入ssh-keygen -t rsa -C “邮箱地址”,连续三个回车,生成密钥
(3) 输入eval “$(ssh-agent -s)”,添加密钥到ssh-agent
(4) 输入ssh-add ~/.ssh/id_rsa,将生成的SSH key添加到ssh-agent
(5) 打开C:\Users\Administrator\.ssh,用记事本打开id_rsa.pub,复制所有内容
(6) 登录GitHub,点击头像下的settings->SSH and GPG keys->New SSH key
Title随便起,Key中粘贴刚刚复制的内容,保存
回到Git命令框,输入ssh -T git@github.com,测试是否成功
如果提示Are you sure you want to continue connecting (yes/no)?,输入yes
看到:Hi abc! You’ve successfully……说明SSH配置成功!
(7) 配置Hexo中_config.yml文件
打开文件,找到deploy行,修改为如下形式,abc替换为自己的用户名:
deploy: |
(8) 打开Git Bash,输入npm install hexo-deployer-git —save,安装一个扩展插件
至此,已完成关联的建立。
(9) 输入hexo d -g将个人博客发布到GitHub上
打开浏览器,输入abc.github.io,即可看到你的个人博客!
四、写作
1. 创建文章
方式1: 在Git Bash命令框中输入hexo new “xxx”
hexo会在hexo/source/_posts文件夹下生成一个名为”xxx.md”的模板文件(也可以手动在此文件夹新建md文件),xxx为网站上这篇博客的url,_post文件夹专门用于存放每一次需提交发表的文章。
方式2:手动在该_post目录下创建
md后缀文件为 Markdown标记语言,可用常用的文本编辑器打开,如记事本、sublime等,推荐用 Typora软件进行编辑。
Markdown 是一种轻量级标记语言。它允许人们使用”易读易写”的纯文本格式编写文档,然后转换成有效的HTML文档。
简单来说,Markdown就是带格式的文本,Markdown的语法非常简单,只要你接触过了,就会对其爱不释手,再也不想去写什么text文本和word文档了。
打开这个md文件就可以开始写作了
2. 写文章
博客完整格式如下:
|
默认情况下,博客主页会完整显示每一篇文章的内容,可通过在md文件的合适位置加上\来可折叠内容。
3. 发布
每次文章写完或更新配置后,都需输入以下命令进行部署:
① hexo g,在本地生成public文件夹,也就是需要部署的项目
(可选:hexo s,本地预览效果)
② hexo d,将所生成的public目录部署到GitHub上
五、绑定域名
1. 购买域名(推荐阿里云)
2. 解析域名
① 通过cmd的ping命令,查看”用户名.github.io”的ip地址
② 进入控制台,找到购买的域名,点击解析->添加记录
一共两条,一条为A记录,指向IP
记录类型:A
主机记录:@
解析线路:默认
记录值:IP地址
TTL:10分钟
另一条为CNAME记录,指向仓库名
记录类型:CNAME
主机记录:www
解析线路:默认
记录值:仓库名
TTL:10分钟
3. 配置仓库
① 允许通过你的域名来访问”用户名.github.io”
在hexo的source目录下,创建CNAME文件,没有后缀,打开文件后输入你的域名,如abc.top,保存。
② hexo d -g重新部署
生效时间约十几分钟
六、进阶
1. 支持数学公式
hexo默认的渲染器是marked,并不支持mathjax(数学公式)。kramed是在marked基础上修改的,支持了mathjax。你的hexo工程目录下的node_modules中可以找到对应的渲染器文件夹。
① 安装kramed渲染器
npm uninstall hexo-renderer-marked --save |
② 修改配置文件
到主题配置文件中_config.yml
,找到mathjax
,将其修改为true
即可
③ 文章中添加标签
为加快渲染速度,渲染器只会在标签中有mathjax: true的文章中使用mathjax渲染。
title: 机器学习 |
总结
至此,已经完成了个人博客的搭建,相信你也掌握了一些简单的使用规则,但可能对hexo的工作原理还有些许困惑,这部分可参考我的下一篇文章。
有点审美的人都会觉得这个默认界面好丑,想要个性化的界面的话,就要涉及到主题部分了,这部分咱们下回再聊。
其实搭建一个博客是件简单的事,坚持写作才是很难的。
共勉。