Github+Hexo搭建个人博客

发表于2018-08-27更新于2021-12-12阅读次数

环境准备

  • 注册一个github账号；
  • 安装git for windows（或者其它git客户端）

安装node.js

node.js下载文件

  • 然后解压缩，并新建两个目录

node-js新建目录

  • 配置环境变量

node-js环境变量

  • 在cmd执行命令node -v和npm -v测试是否安装成功

node-js测试

  • 在cmd执行以下命令，将npm与node-global、node-cache做相关连
1
2
npm config set prefix "G:\node-v10.3.0-win-x86\node_global"
npm config set cache "G:\node-v10.3.0-win-x86\node_global"

创建Github仓库

  • 创建的仓库名字格式必须为账户名.github.io

github新建仓库

  • 创建完后，打开你刚新建的仓库，选中settings选项卡，找到Github Pages，就可以看到你的博客地址。
    当然现在仓库里面还没有提交什么内容。

gitHub-pages

配置ssh key认证

  • 在你本地提交代码到github时，需要你的权限认证才能通过。这里我们使用ssh key来解决本地和服务器的连接问题。
1
$ cd ~/.ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

  • 使用ssh-keygen 来生成ssh公钥认证所需的公钥和私钥文件
1
ssh-keygen -t rsa -C "446193412@qq.com" #你的邮箱地址

ssh-gen.png

    然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件。若找不到.ssh文件夹，请检查以下两点：

  • 请检查git是否安装成功；
  • 重新配置下面内容
1
2
$ git config --global user.name "focusss"  #你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"  #填写你的github注册
  • 打开id_rsa.pub文件并复制里面的内容。到你的github主页，进入settings -> SSH and GPG keys -> New SSH key，将刚复制的内容粘贴到key那里，title随便填，保存。
  • 测试ssh key是否生效 
1
ssh -T git@github.com #这里的邮箱地址是固定的，不用修改

到这里需要的环境配置已经搭建好了，下面就是搭建博客的过程

搭建hexo博客

  • 新建一个文件夹用于存放你的博客系统代码，比如我的是E:\blog。进入到E:\blog文件夹，对其进行初始化下载。
1
2
$ npm install -g hexo xo init
$ hexo init

初始化完后的目录结构如下：
blog目录结构

  • 启动你本地博客服务
1
2
$ hexo g  #生成相关html文件到public文件夹中去，后续需要提交到github
$ hexo s  #启动服务

hexo

若遇到页面加载不出来，可以试着通过另外的端口进行访问 

1
$ hexo server -p 端口号

修改hexo主题

  • 进入到E:\blog文件夹,执行以下命令:
1
$ git clone https://github.com/fi3ework/hexo-theme-archer.git

下载新的主题，我自己用的主题是archer,大家也可以到https://hexo.io/themes/下载自己喜欢的主题

  • 下载好的主题会存放在themes文件夹里面，同时修改blog文件夹下的修改_config.yml中的theme: landscape改为theme:archer，然后重新执行hexo g来重新生成博客主题。`

新建文章

  • 定位到我们的hexo根目录，执行命令： 
1
hexo new 'my-first-blog'

hexo会帮我们在_posts文件夹下生成相关md文件，不同的主题生成md头部的信息格式不一样，一般格式如下：

1
2
3
4
5
6
7
8
---
title: Github+Hexo搭建个人博客
date: 2018-08-27 20:36:06
categories: Github
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---

  • 按照MarkDown规范编写完文章内容后，执行以下命令就可以在本地预览刚刚写的博客了
1
2
$ hexo g  #生成相关html文件到public文件夹中去，后续需要提交到github
$ hexo s  #启动服务

提交到Github

  • 确保ssh key已经配置好
  • 修改bolg文件夹下_config.yml中有关deploy的部分内容： 
1
2
3
4
deploy:
  type: git
  repository: git@github.com:Focusss/Focusss.github.io.git
  branch: master

注意冒号之后是有空格的

  • 除此之外还需要安装一个插件 
npm install hexo-deployer-git --save
  • 执行hexo d就可以发布到github上了