踩坑填坑:github+hexo搭建自己的博客网站

最近想搞个个人网站,身边的朋友都说挺简单的,那就开始倒弄了······


github提供的page,hexo提供的静态博客文档,这样可以搭建一个自己的一个博客网站。

使用github pages服务搭建博客的好处有:

全是静态文件,访问速度快;
免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;
数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
博客内容可以轻松打包、转移、发布到其它平台;


一、github相关设置

1、在github上创建一个项目

注意:项目名称必须为自己 github的用户名.github.io

image

2、代码库的设置

开启gh-pages功能,点击界面右侧的Settings,你将会打开这个库的setting页面,向下拖动,直到看见GitHub Pages。

之前是需要:点击Automatic page generator,Github将会自动替你创建出一个gh-pages的页面。 如果你的配置没有问题,那么大约15分钟之后,yourname.github.io这个网址就可以正常访问了~ 如果yourname.github.io已经可以正常访问了,那么Github一侧的配置已经全部结束了。

现在不需要设置page generator。就可以访问https://saucxs.github.io/

image

二、安装hexo

1、全局安装hexo-cli指令

npm install hexo-cli -g

查看hexo版本

hexo -v

2、初始化hexo

hexo init

hexo会自动下载一些文件到这个目录,包括node_modules,目录结构如下图:

image

3、开始体验hexo

hexo g

生成静态文件到public文件夹,没有public文件夹就会自动创建,如果有了就会覆盖public内容。

public文件夹的内容是要提交到github上的。

image

4、开启本地服务

hexo s

hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容,很多人会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口占用的缘故,因为4000这个端口太常见了,解决端口冲突问题。

image

三、如何将hexo与github page联系起来

分为3步:

1、配置SSH key
2、设置Git的user name和email
3、配置deployment

1、配置SSH key

如果你之前已经配置好git个人信息,请跳过这一个 步骤,直接来到

为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

$ cd ~/. ssh #检查本机已存在的ssh密钥

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

ssh-keygen -t rsa -C "邮箱"

然后连续3次回车,最终会生成一个文件在用户目录下,

image

打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:

刚复制的内容粘贴到key那里,title随便填,保存。

image

测试一下是否成功

$ ssh -T git@github.com # 注意邮箱地址不用改

image

看到这个信息说明SSH已配置成功!

2、设置Git的user name和email

git config --global user.name "liuxianan"// 你的github用户名,非昵称 git config --global user.email "xxx@163.com"// 填写你的github注册邮箱

设置这个是为了便与之后上传到github的page上。

3、设置deployment

配置_config.yml中有关deploy的部分:

正确写法:

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

错误写法:

deploy:
  type: github
  repository: https://github.com/saucxs/saucxs.github.io.git
  branch: master

后面一种写法是hexo2.x的写法,现在已经不行了,无论是哪种写法,此时直接执行hexo d的话一般会报如下错误:

Deployer not found: github 或者Deployer not found: git

image

需要安装一个插件

npm install hexo-deployer-git --save

如果显示下图


安装失败!

试一下这个!

npm install eslint@4.x babel-eslint@8 --save-dev

以上代码是可以解决该问题的,重点是eslint@4.x 和 eslint@8后面的数字是根据报错信息提示的来写

类似的问题,比如:

ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

再次输入hexo d,就ok了。

image

自己的github的page,显示如下

image

同时,你的github上的项目,代码已经更新。

image

四、保留CNAME、README.md等文件

提交之后网页上一看,发现以前其它代码都没了,此时不要慌,一些非md文件可以把他们放到source文件夹下,这里的所有文件都会原样复制(除了md文件)到public目录。

由于hexo默认会把所有md文件都转换成html,包括README.md,所有需要每次生成之后、上传之前,手动将README.md复制到public目录,并删除README.html

五、修改hexo的主题

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

PS:需要特别注意的地方是,冒号后面必须有一个空格,否则可能会出问题。

举个栗子:

1. 安装 NexT

载主题

如果你熟悉 Git, 建议你使用 克隆最新版本 的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。

在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码:

git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。

启用 NexT 主题

theme: next

到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存

hexo clean

image

hexo s -g //生成静态文件,启动本地服务

六、 写博客

定位到我们的hexo根目录,执行命令:

hexo new ‘HelloEveryone’

image

我们只需要打开这个文件就可以开始写博客了,默认生成如下内容

当然你也可以直接自己新建md文件,用这个命令的好处是帮我们自动生成了时间。

默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?

答案是在合适的位置加上``即可

参考资料:
npm install 包运行出错
github+hexo搭建自己的博客网站(一)基础入门

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

推荐阅读更多精彩内容