使用GitHub-Hexo搭建博客

2018-11-08 本文已影响0人 e20a12f8855d

使用GitHub-Hexo搭建博客

1. 安装 Node.js

安装步骤略过...

打开 cmd 命令行,成功界面如下

node环境安装成功

2. 安装 Git

安装步骤略过...

鼠标右键，成功界面如下

Git 安装成功

3. 注册 GitHub 账户，新建项目

注册步骤略过...

4. 安装 Hexo

4.1 创建文件夹，通过命令进入该文件夹

4.2 输入 npm install hexo -g ,开始安装 Hexo

若 npm 安装 hexo 失败:

npm WARN deprecated swig@1.4.2: This package is no longer maintained

解决方法：切换npm 源，使用淘宝的npm 源

npm config set registry https://registry.npm.taobao.org
cnpm install -g hexo

使用淘宝的 npm 源安装 Hexo

5. 输入 hexo -v, 检查 Hexo 是否成功安装

检查 Hexo 是否成功安装

6. 输入 hexo init , 初始化该文件夹

初始化

出现 Start blogging with Hexo！，表示成功安装

安装成功

7. 输入 npm install , 安装所需组件

安装所需组件

8. 输入 hexo g , 生成主题

生成主题

9. 输入 hexo s , 开启服务器，访问该网址

如果页面一直无法跳转，可能端口被占用

ctrl+c 停止服务器

输入 "hexo server -p 端口号" ,改变端口号

显示下图页面，表示成功

成功！！！

10. 将 Hexo 与 Github page 联系起来

10.1 设置 Git 的 user name 和 email

10.2 输入cd ~/.ssh，检查是否有 .ssh 的文件夹

10.3 输入ls，列出该文件下的内容，下图说明存在

10.4 生成秘钥

输入

ssh-keygen -t rsa -C "***@**.com"

连续三个回车，生成密钥，最后得到了两个文件：
id_rsa和id_rsa.pub（默认存储路径是：C:\Users\Administrator.ssh）。

生成密钥

10.5 添加秘钥

输入

eval "$(ssh-agent -s)"

添加密钥到ssh-agent

添加秘钥

10.6 添加生成的 SSH key 到 ssh-agent

再输入 ssh-add ~/.ssh/id_rsa ，添加生成的 SSH key 到 ssh-agent

10.7 登录 Github ,点击头像下的 settings ,添加ssh

点击左侧 SSH and GPG keys, 再点击右上角 New SSH key

添加秘钥，将id_rsa.pub文件里的内容复制上去

添加秘钥

10.8 测试添加 ssh 是否成功

如果看到Hi后面是你的用户名，就说明成功了

10.9 配置 Deployment

在其文件夹中，找到_config.yml文件，修改repo值（在末尾）

11. 在 Github 仓库中添加 README.md 文件

文件夹下打开命令窗口并执行：

echo "# username.github.io" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/***/***.github.io.git
git push -u origin master

12. 新建博客

文件夹下打开命令窗口并执行：

hexo new post “博客名”

在博客文件夹\source_posts 下会有显示

13. 安装扩展

在生成以及部署文章之前，需要安装一个扩展：

npm install hexo-deployer-git --save

安装扩展

14. 生成及部署

使用编辑器编好文章，那么就可以使用命令：

hexo d -g

生成以及部署了

15. 其他设置

15.1 Hexo之next主题设置首页不显示全文(只显示预览)

进入 hexo 博客项目的 themes/next 目录

用文本编辑器打开_config.yml文件

搜索"auto_excerpt",找到如下部分：

auto_excerpt:
  enable: false
  length: 150

将 false 改为 true

15.2 在 .md 文件中上传本地图片

把主页配置文件 _config.yml 里的 post_asset_folder: 这个选项设置为true
在你的 hexo 目录下执行这样一句话

npm install hexo-asset-image --save

这是下载安装一个可以上传本地图片的插件

安装成功后运行 hexo new post "XXX"，生成文章时 /source/_posts 文件夹内除了xxx.md 文件还有一个同名的文件夹
最后在xxx.md中想引入图片时，先把图片复制到xxx这个文件夹中，然后只需要在xxx.md中按照markdown的格式引入图片

使用GitHub-Hexo搭建博客