Hexo博客之基础搭建教程

介绍

  • 本教程是采用 Gitee或GitHubHexo 框架来搭建个人博客的
  • 本教程中的所有链接均指向为官方链接,望知悉
  • 本教程中的部分内容是借鉴 酷安教程 所写,如需转载请注明
  • 本教程中的所有软件的安装与调试都不赘述,望您多动手百度

一、引入

1.为什么用 Gitee?

  • 众所周知,GitHub 在国内访问速度慢,还有可能被墙。而 Gitee 作为国内版的 “GitHub”,速度快还不用担心后台可能会挂,也不用自己花钱买域名,相对于稳定。

2.为什么用 GitHub?

  • 虽然 GitHub 在国内访问速度慢,还有可能被墙,但如果你想要提升自己博客的搜索排名,或者说让你的博客在外网也可以被别人看到的话,建议使用 GitHub。

3.为什么用 Hexo?

  • 官网直达车:查看链接
  • Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

二、准备工作

1.托管仓库

2.环境安装

  • 安装Git(用来从本地传到 Gitee 和 GitHub 端)。直达链接:查看链接

  • 安装Node.js(用来本地编译生成静态网页)。直达链接:查看链接

3.软件安装

  • 文件编辑器,用来修改博客的配置文件,本人使用的是 VS code。直达链接:查看链接

  • Atom(GitHub 自家的 Markdown 编辑器,主要写博客时使用)。直达链接:查看链接

  • 小书匠编辑器(Markdown 编辑器,写博客时使用)。直达链接:查看链接

  • Typora(一个比较轻便简洁的 Markdown 编辑器,支持大纲查看,强烈推荐)。直达链接:查看链接

三、本地安装 Hexo 框架

  1. 打开 Node.js 的命令行窗口
    Node.js命令行

  2. 用一键安装命令安装 Hexo,命令为:npm install -g hexo-cli
    安装Hexo

  3. 使用 hexo v 命令可以查看已安装的版本号

  4. 初始化 Hexo,即在本地创建 Hexo 文件,命令为: hexo init "D:\My Hexo",建议将该文件夹放在常用盘符下,后续操作均在该文件夹内操作
    初始化Hexo

    注意:如果一直卡在箭头这里,请移步这里,之后重复该命令即可正常解决。

  5. 进入你的数据目录,命令为: cd "D:\My Hexo"
    进入目录

  6. 再次初始化安装 Hexo,命令为: npm install(我这里已经装过了,可能界面显示内容和你们不一样,别急,先进行下一步。如果不对再返回来重试)
    再次安装

  7. 打开 My Hexo 目录,发现有以下文件即为正确
    数据目录

  8. 检测本地 Hexo 是否安装成功,先在该目录右键进入 Git 的命令行模式
    进入git界面

  9. 输入 hexo s 开启本地服务
    本地服务

  10. 复制上图选框内容,去浏览器打开
    本地网站

  11. 至此,本地 Hexo 框架已安装成功

四、配置仓库与上传服务

  • 这里仓库选择有两个,根据自己需要选择即可

1.Gitee

  1. 登入 Gitee 后先新建一个仓库
    新建仓库

  2. 下边选项默认即可

  3. 开启 Gitee Pages 服务来托管你的博客
    Gitee Pages服务

  4. 在该页面内启用,显示如下:
    网站链接

  5. 至此,Gitee 仓库完成创建且已开启服务,请牢记上面这个网址,该网址即为你的博客链接,后续会用到

  6. 找到码云设置界面的这两处信息
    昵称和邮箱

  7. 在 Git 界面配置 Git 全局信息
    命令为: git config --global user.name "你的昵称"
    命令为: git config --global user.email "你的邮箱"
    配置git

  8. 修改本地配置文件,在你的数据目录内找到这个文件 _config.yml 并打开
    config文件

  9. 找到 URL 一行,修改 url 和 root。url 即为这里的博客地址,root 为什么这样写绿字已经解释了,之后按 ctrl+ S 保存
    修改URL

  10. 设置 Git 路径,进入你创建的仓库,在右边克隆那复制 HTTPS 地址
    仓库HTTPS

  11. 打开 _config.yml 配置文件,修改最下边 deploy 区域,按图增加一个 repo,之后按 ctrl+S 保存
    deploy

    注意:图中红线框着的地方有空格,千万不要忘记。这里是博主遇到的最大的坑。Hexo 中和 Markdown 中最要注意的就是空格了。

  1. 安装 hexo-deployer-git 插件,命令为: npm install hexo-deployer-git --save
    安装deployer插件

  2. 生成静态文件并上传至 Gitee 端,将博客部署到服务器,命令为: hexo g && hexo d,中途会让你输入 Gitee 的账户密码
    登陆账户

  3. 这就代表上传完毕了
    部署

  4. 进入仓库检查是否上传成功,这就代表已成功传入仓库中
    对接成功

  5. 浏览器登录博客地址查看博客
    查看博客

  6. 至此,博客搭建完毕

2.GitHub

  • 这里的步骤有些图我是用的上面 Gitee 的,方法类似,各位注意区别一下就行
  1. 登入 GitHub 后点击 Start project 或者下面的 new repository 创建一个新的仓库。

  2. 仓库名格式为 用户名.github.io注意:GitHub 仅能使用一个同名仓库的代码托管一个静态站点,这个网上很多教程没说到
    Github01.png

  3. 开启 GitHub Pages服务来托管你的博客,进入仓库,点击 Settings,往下翻,找到 GitHub Pages 区域
    Github02.png

  4. 将 none 改为 master branch
    Github03.png

  5. 等待网页自动刷新就开启了该功能,上边即是你的网页链接
    Github04.png

  6. 至此,GitHub 仓库完成创建且已开启服务,请牢记上面这个网址,该网址即为你的博客链接,后续会用到

  7. 在 Git 界面配置 Git 全局信息,昵称即为你 GitHub 的用户名,邮箱是自己的注册邮箱
    命令为: git config --global user.name "你的昵称"
    命令为: git config --global user.email "你的邮箱"
    配置git

  8. 生成密匙,命令为:ssh-keygen -t rsa -C "你的邮箱",连续按三下回车,最后会获得一长串的 public key,复制好备用
    Github05.png

  9. 首次使用还需要确认并添加主机到本机 SSH 可信列表,命令为:ssh -T git@github.com。若返回 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. 内容,则证明添加成功
    Github06.png

  10. 在 GitHub 的设置处找到 SSH and GPG keys
    Github07.png

  11. 点击添加,Title 随便填,然后把刚刚复制的内容填到 Key 处然后确认就成功添加好 SSH 了

  12. 修改本地配置文件,在你的数据目录内找到这个文件 _config.yml 并打开
    config文件

  13. 找到 URL 一行,修改 url 和 root。url 即为这里的博客地址,root 这里只需要写一个 / 即可,之后按 ctrl+ S 保存
    Github08.png

  14. 设置 Git 路径,进入你创建的仓库,在右边这里切换为 SSH,复制以 git 开头的那一段内容
    Github09.png

  15. 打开 _config.yml 配置文件,修改最下边 deploy 区域,按图增加一个 repo,之后按 ctrl+S 保存
    Github10.png

    注意:图中红线框着的地方有空格,千万不要忘记。这里是博主遇到的最大的坑。Hexo 中和 Markdown 中最要注意的就是空格了。

  16. 安装 hexo-deployer-git 插件,命令为: npm install hexo-deployer-git --save
    安装deployer插件

  17. 生成静态文件并上传至 GitHub 端,将博客部署到服务器,命令为: hexo g && hexo d,中途会让你输入 GitHub 的账户密码(我这里的图是 Gitee 的,GitHub 类似)
    登陆账户

  18. 这就代表上传完毕了(我这里的图是 Gitee 的,GitHub 类似)
    部署

  19. 进入仓库检查是否上传成功,这就代表已成功传入仓库中(我这里的图是 Gitee 的,GitHub 类似)
    对接成功

  20. 浏览器登录博客地址(这里换成你 GitHub 的地址即可)查看博客
    查看博客

  21. 至此,博客搭建完毕

五、绑定域名

  • 在使用 Gitee 或者 GitHub 部署自己博客时,会发现链接很长,一方面别人并不好记,另一方面也并不太好看,所以可以自己买个心仪的域名,然后使用域名解析到你的博客的链接上去
  • 我这里买的是阿里云的域名,新用户首次购买有优惠,当然你们也可以使用其他的,原理类似

1.GitHub Pages + 域名

  • 在上面第四大点中的 GitHub 上传服务搭建好后,自己购买一个域名
  • 在系统的 cmd 窗口 ping 一下你的 GitHub 的博客地址,记录下实际的ip地址
    解析域名3.png
  • 在域名的管理台界面找到域名解析,点击添加第一条记录:
    解析域名1.png
  • 保存后点击添加第二条记录:
    解析域名2.png
  • 进入 GitHub 的设置界面找到 GitHub Pages 处,在 Custom domain 处填入自己的域名地址
    域名解析4.png
  • 访问你的博客在 GitHub上的项目仓库,点击 Create new file 新建文件,命名为 CNAME,内容写上你的域名,不要http等,如下图:
    域名解析5.png
  • 但是每次使用 Git 同步的时候,CNAME 文件都会从仓库中消失,这时候我们需要在本地博客的 /source 目录里新建个同样的 CNAME 文件,使用记事本打开,填写内容也与上边一致,如下图:
    域名解析6.png
  • 重新使用 Hexo 命令上传到仓库,等待几分钟,即可使用域名访问自己的博客了

2.Gitee Pages + 域名

  • 方法和 GitHub 类似,自行摸索即可

六、常用指令

1.创建文章或页面

  • hexo new [layout] <title> ,layout 属性如下:
    post:新建文章,存放路径于 source/_posts ,新建文章可以使用简写命令,如本文的创建即可以用 hexo n Hexo博客之NexT配置教程
    page:新建页面,如404,分类等,存放路径于 source/
    draft:新建草稿,存放路径于 source/_drafts,这里也可以用另一个命令新建草稿 hexo publish [layout] <title>

  • 上面的 <title> 属性是博文 Markdown 文件的名字,一般也会自动生成为博客文章的标题,也是博文链接的后缀(如 https://www.wrysmile.cn/2020/03/22/hexo-tutorial/ 中的hexo-tutorial

2.上传仓库

  • hexo clean 清理缓存文件——db.json和已生成的静态文件——public
  • hexo g 生成网站静态文件到默认设置的 public 文件夹
  • hexo s 启动本地服务器,用于预览主题。默认地址:http://localhost:4000/
  • hexo d 自动生成网站静态文件,并部署到设定的仓库

七、常见问题

1.初始化 Hexo 时卡条

  • 很多人在初始化 Hexo 的过程中,总是在 init 这一步卡在 20%/30% 这里就不动了,博主也遇到了这个问题,最后发现是因为这里需要从 GitHub 端进行下载相关的配置。
  • 查阅网上资料,有以下两种方法,请自行选择。

方法1:科学上网

  • 毕竟 GitHub 是国外网站,可能下载数据时会有延迟等等问题,故可尝试科学上网方法
  • 博主试了,用的临时下载的 微屁恩 ,没有成功,只好选用第二种方法

方法2:ping github.com

  • 先查询 github.com 的 ip:查看链接
    ip查询
  • 打开 C:\Windows\System32\divers\etc 目录下的 hosts 文件,用记事本以管理员身份运行打开,在最后一行添加 192.30.253.112 github.com 即可
    修改hosts
  • Windows下按 win+R 进入 cmd 命令行,输入 ping github.com 可看见收到 github 站点的反馈,说明 ping 成功
    ping
  • 再次执行初始化 Hexo 命令即可正常初始化安装
  • 该方法来自这位老哥给的方法,实验证明 win10 下也同样适用。查看链接
  • 解决 ping github.com 超时的方法来自这位老哥。查看链接

2.部署到 Gitee 后博客内容无变化

  • 正常执行上传部署操作,即 hexo g && hexo d
  • 进入 Gitee 官网找到放博客的仓库
  • 找到服务-Gitee Pages,点击更新
  • 此时会重新部署,完成后博客网站就更新了

八、该系列文章