利用Hexo在Github上部署个人博客

利用Hexo在GitHub上部署个人博客

  • 1.前言
    • 1.1准备
  • 2.开始
    • 2.1在GitHub上创建仓库
    • 2.2 搭建Hexo并将个人博客部署至Github
      • 2.2.1利用npm安装cnpm
      • 2.2.2 安装并部署Hexo
      • 2.2.3 将个人博客部署至远端服务器

1.前言

使用GitHub部署个人博客可以不用花一分钱租用或购买服务器便能拥有个人网站。在开始之前,我们需要下载几个软件。

1.1准备

你需要准备的有:

  1. 一个GitHub账号
  2. 安装Node.js
  3. 安装Git
  4. 安装Hexo

2.开始

2.1在GitHub上创建仓库

申请Github账号,建立一个仓库,并为此创建一个Github Pages

注册GitHub账号(略)。注册完成后在Github首页在右上角 ‘+’ 号,选择 New repository

利用Hexo在Github上部署个人博客_第1张图片
仓库名为 你的账户名 + github.io 设置完成后点击下方绿色按钮
利用Hexo在Github上部署个人博客_第2张图片
建好后在项目页面的顶部右侧选择 Setting利用Hexo在Github上部署个人博客_第3张图片
往下拉直到看到 Github Pages 看到Source下有提示错误,我们点击下方的 Choose a theme 随意选择一个主题
利用Hexo在Github上部署个人博客_第4张图片
选择完成后返回项目页面可以看到Github Page变成下图
利用Hexo在Github上部署个人博客_第5张图片
至此Github Page建立完成

2.2 搭建Hexo并将个人博客部署至Github

2.2.1利用npm安装cnpm

由于国内镜像源速度很慢,所以在使用前利用npm安装cnpm,使用淘宝镜像源。使用 Win + R 在弹出的窗口中输入 cmd 打开命令行窗口
在命令行中输入

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

输入cnpm -v查看版本号检查是否安装成功
利用Hexo在Github上部署个人博客_第6张图片

2.2.2 安装并部署Hexo

首先在cmd输入如下命令检查Git及Node.js是否安装成功

git version

node -v

出现版本号即安装成功

利用Node.js的包管理器npm安装Hexo:

npm install hexo-cli -g #全局安装

输入

hexo -v

验证是否安装成功,之后将正式建立网站利用Hexo在Github上部署个人博客_第7张图片

在喜欢的位置创建一个空文件夹,注意文件夹必须为空。我们之后的博客全部文件都会在这个文件夹中。推荐大家习惯性备份,后面一旦出现任何问题可以直接把文件夹删掉重来。我这里的路径为D:\Blog

在该文件夹下右键点击Git Bash Here
利用Hexo在Github上部署个人博客_第8张图片

输入 hexo init 初始化文件夹(没有反应请耐心等待)

$hexo init

输入npm install安装组件

$npm install

输入npm g生成静态文件

$npm g

输入npm server启动服务器

$npm server

执行命令提示 localhost:4000
复制地址在浏览器上打开看到下图,博客界面已经显示出来了
现在的博客仅在本地成功显示,接下来我们要把博客部署到远端服务器
也就是把页面推送至Github Pages
利用Hexo在Github上部署个人博客_第9张图片

2.2.3 将个人博客部署至远端服务器

配置SSH公钥

配置GithubSSH密钥使本地git项目远端Github建立连接,使我们在本地写的代码与Github代码库同步。操作如下:
在我们创建博客文件夹里右击,选择 Git Base Here
输入

$ssh-keygen -t rsa -C "[email protected]" #将邮箱填入示例中

按下回车后得到保存的目标地址,也可以在此处修改成你希望的地址(默认在C:\Users\Administrator.ssh)
输入

$clip < ~/.ssh/id_rsa.pub

将id_rsa.pub文件中的内容复制到剪贴板

回到Github主页,点击头像下的Settings
利用Hexo在Github上部署个人博客_第10张图片
在左侧找到SSH and GPG keys
利用Hexo在Github上部署个人博客_第11张图片
随便起一个Title 将剪贴板中的公钥内容粘贴至Key
利用Hexo在Github上部署个人博客_第12张图片
完成后我们在终端测试是否安装成功
输入

$ ssh -T [email protected]

成功后你已经可以通过SSH链接到GitHub了,输入下面的代码设置信息,把名称和邮箱替换成你自己的

$ git config --global user.name "your_name" 
#将自己的用户名填入示例
$ git config --global user.email "[email protected]" 
#将自己的邮箱填入示例

在仓库页面将链接复制到剪贴板中
利用Hexo在Github上部署个人博客_第13张图片

接下来直接在电脑上打开我们创建的Blog文件夹,在文件夹中有一个 _config.yml 配置文档。
打开 _config.yml 并翻到最后,看到#Deployment
将所复制的链接粘贴至repository:
注意: 每个: 后都有空格

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Tarsmar/Tarsmar.github.io.git
  branch: master

在命令窗口部署相关插件

$ npm install hexo-deployer-git --save

完成后,离成功就只差最后一步了

hexo g
hexo d
#或者
hexo d -g

利用Hexo在Github上部署个人博客_第14张图片
在弹出的窗口输入Github的账号及密码
等待片刻部署便完成了
在浏览器中输入 **https://tarsmar.github.io/**便可以访问到个人博客
利用Hexo在Github上部署个人博客_第15张图片

至此,个人博客已经部署完成

你可能感兴趣的:(利用Hexo在Github上部署个人博客)