个人博客搭建(一)

简介

Hexo是一款具有快速、简洁且高效的博客框架,也是目前最受欢迎博客框架之一。GitHub是一个面向开源及私有软件项目的Web托管平台,GitHub Pages是通过GitHub免费托管的公共网页,本文将搭建hexo博客框架放在Github上托管。


一、环境部署

本文以window系统为例,安装软件为git与Node.js配置当前系统。

1.1 安装git软件

由于服务器在国外,下载过于缓慢,可在其他国内网站中下载镜像文件。 git网站地址 git安装步骤

1.2 git bash与git cmd 的区别

本人使用过程中的体会,git bash命令针对局部,例如,以后写博客时,在blog文件下进行发布,只需打开blog文件,右键选择git bash命令即可,若使用git cmd命令则需逐步打开文件,定位到blog,相比更加复杂。

1c4Ph9.jpg
1coRUS.jpg

1.3 Node.js

选择12.15.0LTS版本 Node.js官方网站

1.4 检查Node.js安装

在git bash命令窗口下输入:(位置任意)

node -v 
#返回Node.js的版本号
npm -v
#返回npm信息

二、hexo框架

2.1 安装淘宝镜像源

为了提高下载插件速度,安装淘宝的镜像源(若安装不成功,多尝试几次就可以了)

npm install -g cnpm --registry=https://registry.npm.taobao.org
#安装cnpm
cnpm
#返回cnpm信息
cnpm -v
#返回版本号

2.2 安装hexo框架

在博客目录下(本文中blog文件夹下),右键弹出的Git Bash Here窗口中输入以下命令:

cnpm install -g hexo -cli
#安装hexo命令
hexo -v
#返回hexo版本信息

2.3 本地博客初始化

  1. 选择安装位置,并建立blog文件夹;
  2. 打开blog文件夹,右键选择Git Bash Here,输入一下命令:
hexo init
#初始化hexo博客
hexo s
#在本地运行

1gm5uj.jpg
本地博客网站:http://localhost:4000

三、博客部署到GitHub(远端)

3.1 GitHub建立博客仓库

1gelwt.jpg

仓库地址:

1gmeA0.jpg

3.2 blog文件下安装hexo-deployer部署插件

cnpm install --save hexo-deployer-git

3.3 添加GitHub博客仓库地址

找到blog文件中_config.yml文件,使用Visual Studio Code编辑器打开

1gEIk8.jpg

注意:原始_config.yml没有repo、branch 且type后面没有东西

type: 一个名字,建议写成git.
repo: repository仓库地址,即仅为博客创建的新的GitHub仓库。
branch: 分支,这里设置管理员 master
  • 更改后保存;
  • 在blog文件夹中,右键选择Git Bash Here,输入一下命令:
hexo clean
#清空之前主题
hexo g
#生成静态文件
hexo s
#在本地运行
1gm5uj.jpg

本地博客网站:http://localhost:4000

3.4 部署远端

hexo d
#发布到GitHub的paper上
  • 将本地文件上传到GitHub新建的博客仓库中。
  • 网址为仓库名.github.io