查了很多资料,咨询各种大牛,想把这个过程总结一下,其中步骤尽可能详细,希望能对需要的小伙伴们有用。
本文章分为三个部分:
博客搭建流程
在开始搭建博客之前,首先小伙伴们请检查自己的电脑里是否存在 Node.js 和 git 的开发环境,之前没安装过的请自行安装,以下为官网链接:
一.安装hexo
在安装 hexo 之前确保准备工作已经做好,即 git 和 node.js 环境已经安装完毕,GitHub 账号已经申请完毕,我们就可以开始安装 hexo 的环境了。首先可以在本地创建一个新的文件夹进行存放博客目录,创建好之后打开控制台,输入以下命令进行 hexo 的安装。
| |
安装之后,可以输入 hexo -Version来查看 hexo 是否正确安装,如图:
如果,你输入完这个命令出现和我一样的界面,那么恭喜你,第一步已经完成啦,( ̄▽ ̄)~*
二.初始化
1. HEXO INIT
打开本地的开发目录,需要输入cd XXX(你创建的开发目录) 到这个目录下,执行以下操作:
例如:我创建了 hexo_blog 这个文件夹来存放博客,
| |
初始化成功之后,目录下会自动创建一些文件,我的文件目录是这样的:
初始化成功后,文件内目录如下:
2. 生成静态页面
在控制台输入以下命令,即可自动解析生成 html 文件。
| |
3. 本地进行预览
在控制台输入此命令,即可在本地进行预览博客。
| |
成功如下图:
打开浏览器,输入图中红色框内网址即可预览网站。Ctrl+C 即可暂停。
三.创建 GitHub 项目
本步骤基于已经创建好了 GitHub 账号。
创建新的项目
登录到自己GitHub首页,点击右上角:名称及描述
Repository name 需要填写XXX.github.io(注意这里:XXX需要与你的 GitHub 用户名相同)如图所示:
description 随意填写一下说明就好,设置好之后,点击创建按钮即可。- SSH配置
密钥的配置这里就不进行多说,没配置过的小伙伴可自行百度就好。
四.配置部署
1. 修改配置文件
GitHub项目创建好之后,回到我们本地的文件目录,之前给大家看过初始化之后本地文件的目录结构:
我们需要修改的是 _config.yml 这个文件,在目录下找到这个文件直接进行修改即可。
打开此文件,找到图中位置:
修改之后为:(注意:分号后需添加空格)
| |
其中,repo 的值获取方式为你创建好的GitHub项目的克隆地址:
2. 我们还需安装一个库
在控制台输入npm install hexo-deployer-git --save
成功之后如下:
3. 最后一步执行:
| |
在浏览器中输入网址:https://XXX.github.io/,即可打开你的博客。
至此,用 hexo 实现的博客搭建流程完结撒花 ⁽⁽ଘ(ˊᵕˋ)ଓ⁾⁾*
4. 常用命令
在接下来的维护工作中,只需要执行以下命令即可更新博客:
1hexo clean && hexo g && hexo d常用命令解析:
1234567hexo new "Name" #新建文章hexo new page "pageName" #新建页面hexo generate #生成静态页面至public目录hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)hexo deploy #将.deploy目录部署到GitHubhexo help #查看帮助hexo version #查看Hexo的版本
更换主题文件
hexo 提供了炒鸡多并且好看的主题供大家选择,接下来就教教亲们如何进行更换主题。
网址1:hexo.io/themes/
网址2:github.com/hexojs/hexo…
首先大家可以选择一款自己喜欢的主题,例如我的主题是 yilia
1. git clone
打开主题所在的GitHub页面,一般主题的发布者都会在readme中提供说明此主题的使用方式以及克隆地址。
| |
2. 修改Hexo的配置文件_config.xml:
| |
配置个人域名
1. 打开 阿里云官方网站
个人域名步骤,需要大家去买一个自己喜欢的域名,可自行选择不同的后缀,后缀不同,价钱也不同
登录
1https://wanwang.aliyun.com/登录之后点击控制台
看左侧导航栏,选择域名与网站下的域名:
此时可以看到自己的域名状态,点击解析:
点击添加解析,
注意:名称不要忘记加
.,正确形式为XXX.github.io.
最后回到本地,在public文件夹下新建文件,并填写自己的域名
执行一遍
hexo clean && hexo g && hexo d进入GitHub中看CNAME文件是否上传成功
如果以上步骤小伙伴们都已经完成了的话,即可打开 个人域名,查看到自己的博客啦 !
本文至此结束(๑•̀ㅂ•́)و✧
友情链接:Github Pages 部署 https
From: itoss.me