Hexo+github如何搭建博客

前言

博客有第三方平台,也可以自建,比较早的有博客园、CSDN,近几年新兴的也比较多诸如:WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。

这次我要说的就是 Github Page + Hexo 搭建个人博客的方式!Github Page 是 Github 提供的一种免费的静态网页托管服务(所以想想免费的空间不用也挺浪费的哈哈哈),可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源,这次我们的主角就是 Hexo 了,具体的内容下面在文章内介绍。

演示站:晚枫博客

image

博客文章链接:https://whitesir-blog.top/posts/fef1.html

下面就开始吧~

一、准备博客环境

准备 node 和 git 环境,
首先,安装 NodeJS,因为 Hexo 是基于 Node.js 驱动的一款博客框架,然后,安装 git,一个分布式版本控制系统,用于项目的版本控制管理,作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 Git 教程。

1.1 Node.js的安装与配置

下载地址:https://nodejs.org/en/

根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤。

这里我推荐菜鸟教程的Node.js 安装配置这里面很详细!!

安装完成后呢,我们就要去验证有没有安装成功。

首先,win+R,再输入cmd,按Enter进入到我们的控制台,查看node和npm的版 本,看是否安装成功。

image

按照上图这样输入命令后,如果结果和上图差不多的话(你们下载的版本有可能不一样),就说明已经安装成功了!

假如执行node -v报错的话,那么手动将Node.js的安装路径添加到环境变量中,右击点击我的电脑 ->属性 -> 高级系统设置 -> 环境变量,在系统变量下找到名为path的变量名,如下图:

image

选中path,或者双击,然后将你node.js的安装路径放在path变量值的最后面,如果添加之前path值最后有 英文的分号,则直接将路径添加进去即可,如果没有,先添加分号,然后点击保存,回到桌面,打开cmd(Win+R),执行node -v,看是否成功。

接下来,由于国内镜像源速度比较慢,一般先安装cnpm淘宝源,选择复制下列一个命令粘到cmd执行

# 查看npm的配置
npm config list
# 默认源
npm config set registry https://registry.npmjs.org
# 临时改变镜像源
npm --registry=https://registry.npm.taobao.org
# 永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
# 另一种方式,编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

安装镜像后,输入下列指令,查看是否安装成功

cnpm -v

image

1.2 Git的安装与配置

同样这里我还是推荐大家去菜鸟教程Git的安装与配置,下载安装后按照下面步骤进行

回到桌面,点击鼠标右键,会出现两个选项Git GUI HereGit Bash Here,在打开Cmd(Win+R),分别输入gitgit --version,如果出现如下图的情况,即安装成功!

image
image

二、Github注册以及Github Pages创建

我推荐一个简书上面的博主写的文章Github注册以及Github Pages创建,根据他的步骤完成Github的注册以及Github Pages后,让我们进入下一环节!!

三、配置Git用户名和邮箱

在桌面点击鼠标右键,点击Git Bash Here,会出现一个界面如下图所示:

image

然后分别输入下面的两个命令,并回车:

git config --global user.name "此处填写你注册时的用户名"
git config --global user.email "此处填写你注册时的邮箱"
# 一般只要不报错,可以跳过下面寻找.gitconfig文件

然后找到.gitconfig文件,文件存放位置在C:/Users/[username]/.gitconfig(未找到的话,请开启显示隐藏文件的功能),用编辑器打开,看到如下图所示的内容,即配置成功!

image

四、本地安装hexo静态博客框架以及发布到Github Pages

首先选择一个磁盘作为你博客文件的存放位置,然后新建一个文件夹,比如名为blogtest的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择Git Bash Here,然后依次输入如下命令,:

# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后,在输入下面的命令
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>
npm install  # 安装博客所需要的依赖文件
image
image

等待运行完成,此时文件夹中多了许多文件。
注意后续的命令均需要在站点目录下(即文件夹内)使用Git Bash运行。
此时Hexo框架的本地搭建已经完成了。我们来运行一下看看,命令行依次输入以下命令 :

hexo g
hexo s
image

浏览器中打开http://locakhost:4000或者127.0.0.1:4000,可以看到一个网页,说明Hexo博客已经成功在本地运行。

image

1. 本地博客发布到Github Pages

之前的步骤中,我们已经完成了对Github账户的注册以及Github Pages的创建,接下来是将本地博客发布至Github Pages。

首先需要安装发布的插件,在站点目录下执行下面的命令,也就是创建的博客目录下:

npm install hexo-deployer-git --save

紧接着,将本地目录与GitHub关联起来,输入下面的命令行:

ssh-keygen -t rsa -C "你的邮箱地址"

输入后一直回车,然后在C:/Users/[username]目录下找到名为.ssh的文件夹, 文件夹内会有两个文件,一个id_rsa.pub一个id_rsa,用文本编辑器打开id_rsa.pub,复制里面的的内容。 然后打开Github,点击右上角的头像 Settings 选择SSH and GPG keys

image

点击New SSH key 将之前复制的内容粘帖到Key的框中。 上面的Title可以随意,点击Add SSH key 完成添加。

image

然后回到Git的命令行界面,测试一下是否与GitHub连接成功。输入下面的命令行:

ssh -T git@github.com

点击回车,然后会出现一个询问内容,输入yes,回车,会出现一段内容,Hi ! You've successfully authenticated, but GitHub doesnot provide shell access.。 说明连接成功。此处这个``应该是你Github的用户名。

进入博客站点目录,用文本编辑器打开_config.yml,这个_config.yml是博客的配置文件,在以后的博客修改,如个性化修改,博客SEO优化等都会使用到,修改如下图的几个地方:

title: 你的博客名
subtitle: 博客的副标题,有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者,在文章中显示
language: 博客语言语种   
timezone: 时区
image

滑到文件最底部,有一个deploy,在deploy下面添加一个repo项 ,一个branch项。填入如下代码,并如下图所示:

type: git
repo: git@github.com:Github用户名/github用户名.github.io.git  
//也可使用https地址,如:https://github.com/Github用户名/Github用户名.github.io.git            
branch: master
image

最后就是生成页面,并发布至Github Pages,执行如下命令:

# Hexo会根据配置文件渲染出一套静态页面
hexo g
# 将上一步渲染出的一系列文件上传至至Github Pages
hexo d
# 也可以直接输入此命令,直接完成渲染和上传
hexo g -d

上传完成后,在浏览器中打开https://<用户名>.github.io,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话清除一下浏览器缓存试试。

到此,基本的个人博客搭建就完成啦,以为默认的主题不好看,所以后续我会将博客美化教程发出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容