Hexo搭建个人博客并部署到GitHub

注意:以下操作过程都要在Git Bash下进行

1. 更换镜像源

由于国内npm速度较慢,最好安装cnpm并指向淘宝的镜像源,
首先进入命令行界面,win10可使用快捷键win+R输入cmd

npm install -g  cnpm --registry=https://registry.npm.taobao.org


2. 安装博客框架hexo

cnpm install -g hexo-cli

3. 开始搭建框架

先创建一个空目录用来存放框架文件(如果后面出错就删掉该目录,重新进行)

mkdir D:/block
hexo init

过程比较长,当出现以下信息时表示已安装成功,否则删掉block内的所有文件后重新执行:hexo init

在这里插入图片描述

在 block 目录内使用命令: hexo s 即可开启hexo

然后在浏览器地址栏输入: http://localhost:4000/

便可进入hexo的博客界面

Hexo搭建个人博客并部署到GitHub_第1张图片


4. 开始使用hexo写博客

在刚才的目录下使用命令:hexo n "MyFirstBlog"
然后cd source/_posts/进入该目录,使用windows用户使用dir,mac使用ls,便能出现刚创建的博客信息:

在这里插入图片描述

以后便可以直接在该目录下用Typora编辑
在这里插入图片描述


5. 上传博客

等写好自己的博客之后,cdblog 目录, 使用以下命令:

hexo clean
hexo g
hexo s

在这里插入图片描述


在浏览器重新进入http://localhost:4000/ 后,会发现刚上传的博客已在自己博客的首页更新:
Hexo搭建个人博客并部署到GitHub_第2张图片


部署到Github

用github可能会有点卡,几分钟让你访问Github的速度翻十倍!几步配置便可飞速访问Github。

创建仓库

Hexo搭建个人博客并部署到GitHub_第3张图片
Hexo搭建个人博客并部署到GitHub_第4张图片


在blog目录下安装 hexo-deployer-git

cnpm install --save hexo-deployer-git

在blog目录下的_config.yml 文件的最底部修改以下配置

  • 注意: windows用户的type:’ ’ 不要忘了单引号,且每个 : 后都需要空格
    Hexo搭建个人博客并部署到GitHub_第5张图片

  • 其中在刚创建好仓库会自动跳转到以下页面,copy箭头所指的仓库地址并添加到上图所指的位置

Hexo搭建个人博客并部署到GitHub_第6张图片

部署完成

在blog目录下执行hexo d ,按要求输入GIthub的用户名和密码即可。
如若出错,可能是GIt的问题,可通过 Git配置身份 解决问题。

Hexo搭建个人博客并部署到GitHub_第7张图片


浏览器访问

最后在GIthub仓库地址栏copy红圈部分到浏览器直接访问(刚部署上传完博客需要等待一段事件才能访问,耐心等待即可)
在这里插入图片描述

出现如下画面则表示博客部署到github上成功,任何人通过该地址可访问你的博客。

Hexo搭建个人博客并部署到GitHub_第8张图片


更换博客主题

主题阅览

在blog目录下输入以下命令,本地克隆主题

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

克隆完毕会生成themes目录,存放着下载过来的主题资源
Hexo搭建个人博客并部署到GitHub_第9张图片
在blog/_config.yml 修改配置,采用刚克隆的主题
Hexo搭建个人博客并部署到GitHub_第10张图片
重新生成

hexo clean
hexo d
hexo s

重新进入http://localhost:4000/便可查看效果

Hexo搭建个人博客并部署到GitHub_第11张图片

  • 最后执行一次hexo d 便可在github上浏览自己的博客。

至此,属于自己的博客搭建成功,做个笔记记录下

–2020.6.7

你可能感兴趣的:(Blog,git,github,java)