GitHub博客搭建步骤
一.软件准备Node.js、Git
软件我放在百度网盘,看我其他博客
二.Hexo配置流程
- 安装Hexo
Hexo 是一款基于 Node.js 的静态博客框架。Hexo 使用 Markdown 解析文章,用户在本地安装Hexo并进行写作,通过一条命令,Hexo即可利用靓丽的主题自动生成静态网页。
1)新建文件夹
首先创建一个文件夹,用来存放Hexo模板和项目,然后进入 hexo 文件夹,鼠标右键点击Git Bash Here。
2)安装hexo基础框架(这是安装hexo的基础框架(此处要求已经安装了node.js环境))
第一步:npm install hexo-cli -g
(鼠标右键点击Git Bash Here。)
第二步:hexo init blog
它就会在当前目录下生成一个blog的文件夹,并在里面生成相关配置信息。
第三步:cd blog
切换到blog目录下
第四步:npm install
安装必备的组件,安装完成之后,blog文件夹的目录结构大致如下:第五步:
hexo g
第六步:
hexo s
- hexo主题设置
这里以主题yilia为例进行说明。
1)安装主题(此处当前目录为blog)
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
2)启用主题
cd themes/yilia
git pull //获取远程内容
3) 修改配置文件
修改hexo目录下的_config.yml配置文件中的theme属性,将其设置为我们前面克隆下来的主体样式,此处theme: yilia
4) 重启服务
切换到blog目录
hexo g # 重新生成静态文件
hexo s # 启动本地web服务器
现在打开http://localhost:4000,会看到我们已经应用了一个新的主题。
三.部署到GitHub服务器
1、使用git命令行部署(optional)
此处我们采用git命令来完成部署的工作。
1)
cd d:/hexo/blog
git clone https://github.com/PraySam/training2019.github.io .deploy/training2019.github.io
PraySam/training2019.github.io //为自己的GitHub名称和自己的库名
将我们之前创建的repo克隆到本地,新建一个目录叫做.deploy用于存放克隆的代码。
3)
hexo generate //生成静态文件
cp -R public/* .deploy/training2019.github.io //复制文件
cd .deploy/training2019.github.io //切换目录
git add . //将需要提交的代码添加到暂存区
git commit -m “update” //将暂存区内容提交给本地版本库
git push //推送给远程服务器
简单解释一下,hexo generate生成public文件夹下的新内容,然后将其拷贝至fang235.github.io的git目录下,然后使用git commit命令提交代码到fang235.github.io这个repo的master branch上。
需要部署的时候,执行第三个步骤。执行过程中可能需要让你输入Github账户的用户名及密码,按照提示操作即可。
2、 验证
打开浏览器,输入地址:https://PraySam.github.io/ ,就可以看到我们的博客上线了哈哈哈!!!
四.发布博客内容
1、创建博客标题
hexo new "post title with whitespace"
2、编写博客内容
找到创建的md文件,使用编辑器打开,按照Markdown的格式,编写博客内容,编写完成之后,执行以下代码,将博客内容推送到远程服务器上。
hexo generate //生成静态文件
cp -R public/* .deploy/training2019.github.io //复制文件
cd .deploy/training2019.github.io //切换目录
git add . //将需要提交的代码添加到暂存区
git commit -m “update” //将暂存区内容提交给本地版本库
git push //推送给远程服务器