最全小白向!记 hexo 博客搭建及 butterfly 主题使用(一)

最全小白向!记 hexo 博客搭建及 butterfly 主题使用(一)
Zero617拥有一个自己的博客是属于每一个男人的梦想。
假期闲着没事干,正好手里有一台腾讯云的机子,于是就想到了去搭建一个属于自己的博客。最初我选用了使用人数最为广泛的 Wordpress。确实,Wordpress 配合
Hexo 搭建步骤
环境搭建
安装 Node.js
因为 Hexo 是一款基于 Node.js 的静态博客框架,所以首先要安装 Node.js。
官网地址:node.js,下载最新的对应系统版安装包安装即可
安装完后,打开命令行检查安装是否成功
cmd
<!--code0-->
- 安装 npm,用以下载 Hexo 和相关主题、插件
cmd
<!--code1-->
> <!--code2-->
<!--code3-->
安装 git 并连接 GitHub
Git 是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。
而 Hexo 就使用 git 来进行管理和发布。
安装 git
在 Windows 上使用 Git,可以从 Git 官网直接下载安装程序,然后按默认选项安装即可。
安装完成后,在开始菜单里找到 “Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明 Git 安装成功!
在 git bush 中输入 git --version 来查看一下版本
bash
plaintext
$ git --version # 确认Git安装成功:运行命令查看版本号
git version 2.33.0.windows.2 # 笔者是旧版本,安装最新版本即可
连接 GitHub
- 注册 GitHub 账户
到 GitHub 官网注册账户。
- 设置 username 和 email
bash
plaintext
$ git config --global user.name “XXXXXX" # 你的GitHub登陆名
$ git config --global user.email “xxx@xxx.com” # 你的GitHub注册邮箱
- 连接 git 与 github
bash
plaintext
$ ssh-keygen -t rsa -C “xxx@xxx.com” # xxx@xxx.com是你自己注册GitHub的邮箱
到 C:\Users\ 用户名.ssh\ 下查看是否有 id_rsa 和 id_rsa.pub 这两个文件,id_rsa.pub 里的内容就是你的密钥
- 接下来到 GitHub 上,打开 “Settings”-“SSH and GPG keys” 页面,然后点击 “New SSH Key”,填上 Title(随意写),在 Key 文本框里粘贴 id_rsa.pub 文件里的全部内容。
- 验证是否成功,在 git bash 里输入下面的命令
bash
plaintext
$ ssh -T git@github.com
Hi XXXXXX! You've successfully authenticated, but GitHub does not provide shell access. # XXXXXX是你的GitHub用户名
GitHub 建立部署
GitHub 创建个人仓库
进入 GitHub,点击右上角的 + 号,点击 New repository
Repository name 处填入自己的仓库名称 XXX.github.io
注意要选择 Public,即公开仓库,否则你的网页是无法访问的
勾选上 README 初始化
其他默认即可
安装 hexo
创建一个 blog 文件夹,注意:之后的操作都在 blog 文件夹内进行,如果出错删除该文件夹后重新进行即可。
在 blog 文件夹内右键,点击 git bash here\
# 全局安装 |
完成后,在浏览器地址栏中输入 localhost:4000,就可看到 Hexo 内置的第一篇博文 Hallo world。
常用的 Hexo 命令
- npm install hexo -g # 安装 Hexo
- npm update hexo -g # 升级
- hexo init # 初始化博客
命令简写
hexo n “我的博客” == hexo new “我的博客” # 新建文章
hexo g == hexo generate # 生成
hexo s == hexo server # 启动服务预览
hexo d == hexo deploy # 部署
hexo server # Hexo 会监视文件变动并自动更新,无须重启服务器
hexo server -s # 静态模式
hexo server -p 5000 # 更改端口
hexo server -i 192.168.1.1 # 自定义 IP
hexo clean # 清除缓存,若是网页正常情况下可以忽略这条命令
发布博客
上面只是在本地预览,接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念,在 blog 根目录里的_config.yml 文件称为站点配置文件,如下图
下一步将我们的 Hexo 与 GitHub 关联起来,打开站点的配置文件_config.yml,翻到最后修改为:\
|
最后安装 Git 部署插件,输入命令:
npm install hexo-deployer-git --save |
接着,分别输入这三条命令:
$ hexo clean |
完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io ,
你就会发现你的博客已经上线了,可以在网络上被访问了。
绑定域名
此时的网址还是 GitHub 的 xxxx.github.io,想要个性化的我们自然不会就这么算了,我们可以绑定属于自己的域名到 GitHub 的服务器上。
- 首先进入自己域名的管理台,进入解析,删除原有的解析。添加两条解析记录:
- 记录类型:CNAME 主机记录:www 记录值:xxxx.github.io
- 记录类型:A 主机记录:@ 记录值:IP # IP 通过命令行 ping xxxx.github.io 可以得到
- 登录 GitHub,进入之前创建的仓库,点击 "Settings"-“Pages”, 在 Custom domain 处填入你的域名,save 保存,GitHub 会自动给你配置 TLS 证书 (可能比较慢),等一段时间后,可以开启强制 https。
- 进入本地博客文件夹 ,进入 blog/source 目录下,创建一个记事本文件,输入你的域名(不需要带 www),保存,命名为 CNAME ,注意保存成所有文件而不是 txt 文件。如下图:
bash
plaintext
hexo clean
hexo g
hexo d
现在你就可以用你自己的域名访问自己的网站了!
更换主题
Hexo 有大量的个性化主题可以使用 本博客使用的是 Butterfly 主题,就以此主题作为示例进行演示。
- 下载主题
bash
plaintext
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
现在,主题文件就被你下载到了 blog 目录的 themes 主题下的 butterfly 文件夹中。
2. 打开站点的_config.yml 配置文件,修改主题为 butterflyplaintext_config.yml
# Extensions
## Plugins: <https://hexo.io/plugins/>
## Themes: <https://hexo.io/themes/>
theme: butterfly
现在再去看你的博客,就会发现它已经变成了你想要的样子。
下次具体讲讲 butterfly 主题的配置,如果对这个主题并不感兴趣可以跳过这篇文章。
另外,有机会的话我也会略微提一下 wordpress 的搭建,不过这类教程网上已经很多了,所以如果需求多的话我就写一下吧。
感谢您的阅读。