Hexo+Github搭建个人博客

Hexo+Github搭建个人博客

目录

[TOC]

1. 简介

首次通过Hexo和Github搭建自己的博客,尝试成功,从别人那里借来个yilia主题,看着挺漂亮,索性直接当我的主题用了,虽然还不会太多的配置操作,先把自己搭建博客过程中的主要操作记录下来。

环境简介

本地电脑环境:

windows10

搭建博客需要安装的软件:

git
node.js
hexo

安装搭建博客需要的工具:git和node.js;通过一下命令查询:

$ git --version
git version 2.22.0.windows.1
$ node -v
v10.16.0
$ npm config set registry https://registry.npm.taobao.org

默认已经注册有Github帐号;

Hexo软件还未安装,下文会简单讲述Hexo软件的安装;

2. Github仓库创建和配置

2.1 创建Git仓库

打开GitHub,点击“New repository”,创建一个新仓库,用来专门存放博客日志信息;仓库名要按照格式:账户名.github.io,比如:Mshrimp.github.io;否则,后边的操作会出现问题;创建仓库时勾选上“
Initialize this repository with a README”;

进入创建好的仓库Mshrimp.github.io,点击右侧的“Settings”,向下拉找到Github Pages,会看到网站是:https://mshrimp.github.io/,点击就可以访问,也可以通过外网访问,这时这个博客项目已经部署到网站上了,但是是个空的网站,没有内容;这个网址是博客的默认地址,如果有兴趣可以自己购买域名换成想要的地址。

Image.png
Image2.png

2.2 配置git仓库

如果是第一次使用git,就需要先配置git环境,否则可以跳过;

$ git config --global user.name "Mshrimp"
$ git config --global user.email "******@outlook.com"

在没有配置git环境之前,~/.ssh是不存在的

$ cd ~/.ssh
bash: cd: /c/Users/Kevin-TP/.ssh: No such file or directory

使用ssh-keygen生成私钥和公钥

$ ssh-keygen -t rsa -C "chiyuan.ma@outlook.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Kevin-TP/.ssh/id_rsa):
Created directory '/c/Users/Kevin-TP/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.
Your public key has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:pHNkvs9RsOToxmFH6gnkOb7j/dlRSc4c6TkOvGQ6fcc chiyuan.ma@outlook.com
The key's randomart image is:
+---[RSA 3072]----+
|                 |
|               . |
|      . + +   +  |
|     o B * + * + |
|      B S + * X  |
|     . X = * = o |
|      . B + + o E|
|      .+ o = o . |
|     .o...= .    |
+----[SHA256]-----+

从以上的操作打印可以知道,生成的密钥和公钥的保存路径

Your identification has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.
Your public key has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.pub.

查看生成的密钥和公钥

$ cd ~/.ssh
$ ls
id_rsa  id_rsa.pub
$ cat id_rsa.pub
ssh-rsa 
......

2.3 把本地公钥添加到github中

在GitHub中,点击右侧图像下拉选项,选择“Settings”,在“SSH and GPG keys”中,点击“New SSH key”,并将~/.ssh/id_rsa.pub文件里的内容复制上去,保存退出;

[图片上传中...(Image5.png-33c8b0-1586142114347-0)]
Image5.png

使用“ssh -T git@github.com”命令,测试添加ssh是否成功;

$ ssh -T git@github.com
......
Hi Mshrimp! You've successfully authenticated, but GitHub does not provide shell access.

3. Node安装

4. Hexo安装及配置

先创建一个hexo操作的文件目录

Image1.png

如果使用的是Linux系统,可以直接在命令行中输入命令操作,如果是windows系统,用管理员权限打开“命令提示符”,使用命令在电脑上安装hexo;或者,在hexo目录上右键,选择“Git Bash Here”,用git bash工具打开hexo目录,在git bash中使用命令操作;

4.1 安装hexo

$ npm install hexo -g

C:\Users\Kevin-TP\AppData\Roaming\npm\hexo -> 
C:\Users\Kevin-TP\AppData\Roaming\npm\node_modules\hexo\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 
(node_modules\hexo\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 
(node_modules\hexo\node_modules\nunjucks\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})

+ hexo@4.2.0
added 36 packages from 40 contributors, removed 30 packages, updated 58 packages 
and moved 5 packages in 19.178s

检查hexo是否安装成功

$ hexo -v
hexo-cli: 2.0.0
os: Windows_NT 10.0.18362 win32 x64
http_parser: 2.8.0
node: 10.16.0
v8: 6.8.275.32-node.52
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 4
openssl: 1.1.1b
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a

4.2 初始化hexo文件夹

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'G:\hexo_git'...
remote: Enumerating objects: 9, done.
remote: Counting objects: 100% (9/9), done.
remote: Compressing objects: 100% (7/7), done.
remote: Total 77 (delta 4), reused 5 (delta 2), pack-reused 68
Unpacking objects: 100% (77/77), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'G:/hexo_git/themes/landscape'...
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (29/29), done.
remote: Total 929 (delta 12), reused 15 (delta 3), pack-reused 896
Receiving objects: 100% (929/929), 2.56 MiB | 9.00 KiB/s, done.
Resolving deltas: 100% (492/492), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 340 packages from 500 contributors and audited 6879 packages in 29.578s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

看到“Start blogging with Hexo!”打印,说明初始化完成;

输入npm install,安装所需要的组件

$ npm install

hexo已经安装并初始化完成;

$ ls
_config.yml  node_modules/  package.json  package-lock.json  scaffolds/  source/  themes/

到此,hexo环境安装完成。

4.3 Hexo操作

$ hexo g #generate 生成静态文件
$ hexo s #server 启动服务器。
// 默认情况下,访问网址为: [http://localhost:4000/]

在浏览器地址栏输入“http://localhost:4000/”打开页面,是一个空的博客网页;

Image3.JPG

4.4 将git库和hexo链接起来

配置Deployment

在hexo文件夹中,找到_config.yml文件,修改repository值(在末尾),repository值是github项目里的ssh;

deploy:
  type: git
  repository: git@github.com:Mshrimp/Mshrimp.github.io.git
  branch: master

HexoBlog部署到git,需要安装hexo-deployer-git插件,在blog目录下运行以下命令进行安装;

$ npm install hexo-deployer-git --save

npm WARN babel-eslint@10.1.0 requires a peer of eslint@>= 4.12.1 but none is 
installed. You must install peer dependencies yourself.

+ hexo-deployer-git@1.0.0
added 1 package from 1 contributor, removed 4 packages and updated 14 packages in 
5.684s

修改根目录下_config.yml文件后,需要使用$ hexo deploy部署一下,否则修改内容不会生效;

$ hexo deploy

至此,一个空的博客已经搭建完成,下一步,添加博客文章;

5. 创建博客文章

$ hexo new [layout] <title> #新建文章
// 创建博客:hello-world
$ hexo new post hello-world
INFO  Created: G:\hexo\source\_posts\hello-world.md

创建成功后,会在source/_posts/目录生成hello-world.md文件;

使用编辑器,编辑好hello-world.md文件的内容后,开始在博客中展示;

生成静态文件

$ hexo g
INFO  Start processing
INFO  Files loaded in 757 ms
INFO  Generated: archives/2019/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2019/07/index.html
INFO  Generated: 2019/07/16/hello-world/index.html
INFO  Generated: index.html
INFO  Generated: fonts/iconfont.b322fa.eot
INFO  Generated: fonts/default-skin.b257fa.svg
INFO  Generated: fonts/tooltip.4004ff.svg
INFO  Generated: img/preloader.gif
INFO  Generated: fonts/iconfont.16acc2.ttf
INFO  Generated: fonts/iconfont.8c627f.woff
INFO  Generated: fonts/iconfont.45d7ee.svg
INFO  Generated: img/default-skin.png
INFO  Generated: img/scrollbar_arrow.png
INFO  Generated: slider.e37972.js
INFO  Generated: main.0cf68a.css
INFO  Generated: main.0cf68a.js
INFO  Generated: mobile.992cbe.js
INFO  18 files generated in 784 ms
$ ls
_config.yml  node_modules/  package-lock.json  scaffolds/  themes/
db.json      package.json   public/            source/

启动服务器,通过浏览器打开http://localhost:4000查看博客文件效果

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

在确定博客文件完成之后,提交博客文件到git库保存

hexo d

或者直接生成、提交一起操作

$ hexo g -d

如果执行过程中出现异常,可以先清楚,再生成、提交

$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

提交之后的博客文件,就可以通过浏览器打开git库名称:mshrimp.github.io来打开了,支持外网访问;

至此,一篇博客文件已经生成;

Hexo常用命令

hexo的命令很简单,以下几个是很常用的hexo命令,这些命令需要在当前blog目录下执行

hexo new [layout] <title> #新建文章

新建文章时可以指定文章的布局(layout),默认为post,可以通过修改_config.yml中的default_layout: post来指定默认布局;这样创建的文章都会以md格式保存在source/_post目录中;

hexo g #generate 生成静态文件
hexo s #server 启动服务器。在本地预览效果,默认情况下,访问网址为:http://localhost:4000/
hexo d #deploy 部署网站同步到github。部署网站前,需要预先生成静态文件
hexo clean #clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)。

6. 更换主题

不喜欢原来自带的主题,找了一个比较好看的yilia主题,需要先Github中将yilia主题的源码下载到博客目录的themes目录下;

# git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

在博客根目录下,修改_config.yml文件的themes:

themes: yilia

这个主题中的一些配置,可以根据需要自行修改,配置文件为themes/yilia/_config.yml;

7. 参考文章

https://www.jianshu.com/p/1bcad7700c46

https://segmentfault.com/a/1190000017986794

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容