听如子说:【博客搭建教程】githubpage+hexo搭建属于自己的静态博客

搭建个人博客github+node.js+hexo

感觉最近都在折腾这些东西了,哈哈哈!对大家有用才是真的!

1、准备工作

前言

虽然博客已经是老东西了(前段时间刚把公众号捡起来,路过的用户打开微信,关注一下? ID:”听如子说“)

作为互联网玩家(新菜鸟),怎么也得玩一玩,拥有自己的blog可以记录学习过程和生活(主要靠坚持),任何学习本来就是持续输入的过程,活到老学到老,如果缺少了实践摸索与内化的话,那估计很快就忘记了(Javaweb写的课设我忘得差不多了),所以,好记性不如烂笔头,把做过的事记下来,某一天就方便拾起,输出内容本身也是对知识的一种总结!

本文针对前端网页小白(例如我自己),推荐如下技术路线,这样我们就只专注于网内内容的创作,网页格式样式直接套用现有精美的模板。

简单、快捷、高效。

本文使用的技术栈:

node.js,git,hexo,http://github.io(提供公网ip)

具体流程简明描述:

编写好.md.文件,用hexo解析成html文件,在本地端口预览网页无误,在通过git同步到github代码从库。创建好初始网页后,如果想套用或者自定义网页模板,可以参考hexo官方教程,官网也提供了很多精美的网页模板,大多数时候我们只需套用即可。这套方案主要是针对技术极客创建自己的博客网站,只是实现了静态网页的部署,接下来进入教程!

1.1、git
1.1.1、github

由于博客地址是:

http://username.github.io;

所以注册登陆github,就不用多说了,

百度一下 github 或者

直接打开

github.com


注意:username尽量用小写,邮箱十分重要,GitHub上很多通知都是通过邮箱的。

1.1.2、创建仓库(Repository)

然后右上角选择 Create a new repository
Repository 名字应该是http://username.github.io。 (username与你的注册用户名一致,这个就是你博客的域名了)
其他的可以选择添加一些描述也可以选择默认什么也不添加 ,点击creat repository

1.1.3、安装git

Windows

(1)官网下载并安装 git(很慢,推荐有方法2)
(2)安装 Git waylau/git-for-win: Git for Windows.
https://github.com/waylau/git-for-win

Mac:

使用 Homebrew, MacPorts :brew install git;或下载 安装程序 安装。

Linux (Ubuntu, Debian):

sudo apt-get install git-core

Linux (Fedora, Red Hat, CentOS):

sudo yum install git-core

检验是否安装成功:

安装完成后,在程序中找到“Git”->“Git Bash”

$ git version

设置的时候,名称和邮箱是Github预留好了

这里,推荐廖雪峰老师的Git教程,非常好。

1.2、安装node.js

nodejs官网:https://nodejs.org/en/

下载所需系统的安装包,并根据提示安装即可。

检验是否安装成功:

$ node -v
1.3、安装hexo

上述两个必备程序安装成功之后,只需要通过

npm(node.js提供的安装服务)

便可以完成Hexo的安装了。

# 方法1
$ npm install -g hexo-cli
#方法2
$ npm install -g hexo

hexo目录结构

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── \_drafts #草稿
| └── \_posts #文章
├── themes #主题
├── \_config.yml #全局配置文件
└── package.json

OK,github+node.js+hexo的基本环境都安装配置好了

接下来开搭建博客!

## 2、搭建博客

2.1、创建博客项目文件夹
$ hexo init blog//初始化

速度有点慢,我们耐心等待一会,直到成功提示

INFO Start blogging with Hexo!
2.2、安装依赖包
$ npm install
2.3、本地查看

初始化hexo 后,会自己生成一些关键文件与文件夹

接下来的操作要cd到blog路径下

此时在source目录下自带一篇hello world文章

此时直接执行下方命令

//每次进行相应改动都要hexo g 生成一下
$ hexo generate //方法1
$ hexo g //方法2

//启动服务
$ hexo server //方法1:启动本地服务器 
$ hexo s //方法2:启动服务预览
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

服务打开后,现在已经可以访问本地的Hexo博客了

浏览器输入: ++http://localhost:4000++

3、配置SSH keys

ssh keys是用来联系本地git项目与github远程仓库的

3.1、检查并生成新的SSH Key
$ ssh-keygen -t rsa -C "Github的注册邮箱地址"

【注意】这里的邮箱地址,输入注册 Github 的邮箱地址;

窗口会显示:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):
<回车就好>

然后系统会要你输入密码:
Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

注意:

这个密码主要是防止别人恶意提交到你的仓库,设置为空的话,就是自由仓库,每个人都可以操作。

还有输入密码是无痕迹记录,不要以为没有输入成功。

一直回车后,你会看到:

Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.

说明你成功设置ssh key。

记住这里的路径,不要关闭窗口!

3.3、添加SSH Key到GitHub

按照上面的路径找到id_rsa.pub文件

windows资源管理器查看记得打开隐藏的项目和扩展名

用记事本或文本编辑器打开.ssh文件夹里的id_rsa文件,

全选复制

然后登陆github主页

点击头像后边的箭头,选Settings

进入设置界面后在左侧选SSH and GPG keys

New SSH key //新建一个SSH key

Title:blog //

Key:输入刚才复制的(Key部分就是放刚才复制的内容啦)

点击添加Add SSH key


如果通过上述复制粘贴的key得到以下反馈

Key is invalid. You must supply a key in OpenSSH public key format

那么在git bash中使用下面代码:

clip < ~/.ssh/id_rsa.pub

然后在粘贴到Key的文本框中(主要是key的格式出问题)

3.4、测试

git bash 里输入以下代码“

$ ssh -T git@github.com

//出现这个就表示成功
Hi USERNAME! You've successfully authenticated, but GitHub does not provide shell access.
3.5、设置用户信息

目前SSH成功链接到GitHub!

还需要配置一下个人信息:

$ git config --global user.name "username"//输入注册时的username
$ git config --global user.email  "yourname@yourmail.com"//填写注册邮箱

GitHub 也是用这些信息来做权限的处理

4、配置博客

_config.yml配置文件

这个文件我们会经常用到,后面也会介绍具体可以配置哪些信息。

source:存放markdown文件。

themes:存放主题文件夹

博客名字及作者信息:_config.yml

个人介绍页面:about.md

代表作页面:milestone.md

4.1、配置_config.yml
# Hexo Configuration
# Docs: Configuration
# Source: GitHub - hexojs/hexo: A fast, simple & powerful blog framework, powered by Node.js.
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述,给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考Moment.js | Docs
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
  type: git
  repo: 刚刚github创库地址.git
  branch: master
4.2、配置 Deploy

GitHub设置,类型设置为git指定好repo地址,branch必须设置为master,因为GitHubPage只会从mater分支生成。

(注意有坑:这里我们需要单独设置好在 GitHub 上使用 name 和 email ,否则将会使用 global 的user.name 和 user.email ,囧~~):

Deployment 站点部署到 github 要配置
deploy:
  type: git //type字段对应的是部署的服务器类型,我们在这边填写git即可
  repository: https://github.com/username/username.github.io.git 
或 repo: username/username.github.io // 创建的github仓库的地址
或 repo: git@github.com:username/username.github.io.git
  name: username
  email: username@gmail.com
  branch: master
4.3、推送到 github
4.3.1、确保 git 部署

完成上述配置后,在终端执行

$ npm install hexo-deployer-git --save # 安装该工具,这个操作主要是为了把我们写好的文章部署到 github 服务器上并可以被别人浏览。

插播一条hexo-deployer-git插件的工作流程:

当执行部署操作的时候,首先会自动初始化 git 仓库(位置在 .deploy_git 中),并关联到指定 repo 与 branch ,后续 public 文件夹中自动生成的页面代码将会拷贝至此目录中进行代码管理。若修改了 name 和 email ,需要删掉整个 .deploy_git 再重新部署才会生效。有兴趣的可以看下 hexo-deployer-git 的源码。

4.3.2、发布与访问

最后一步,发布到网上,执行:

$ hexo deploy 或 $ hexo d -g // 生成和部署
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
其中会跳出Github登录,直接登录

完成以上操作后,使用浏览器访问

http://username.github.io ,

就可以成功访问我们的博客。

5、发布内容

在CMD中输入
$ hexo new “测试文章”

$ hexo new test_md

通过关键字来指定文章的分类、标签及是否开启评论等功能。

title: Hello World
date: 2018/6/7 19:45:12
categories:   // 分类
- Diary
tags:        // 标签
- PS3
- Games
comments: false  // 评论功能,默认开启

注意:请参阅Hexo的分类与标签文档,了解如何为文章添加标签或者分类的详细信息。

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件 post.md 来建立文章,因此我们可以修改它建立自己的文章模板

我的模板如下:

title: {{ title }}
date: {{ date }}
tags:
  - 
categories:
  - 
comments: 
password:

就可以新建文章
INFO Created: G:\Github\blog\source_posts\测试文章.md
此时会在source/_posts目录下生成 test_md.md 文件
找到该文章,打开,
在 test_md.md 中输入内容后,保存一下。
使用 Markdown 语法,该语法介绍可以查看
利用HEXO搭建的博客及Markdown语法介绍
然后执行下列步骤

$ hexo clean

INFO Deleted database.
INFO Deleted public folder.
$ hexo generate 或 $ hexo g
INFO Start processing
INFO Files loaded in 1.48 s

6、个性化定制

6.1、更换主题
6.1.1、下载主题

博主用得是Hexo上比较热门的iissnan/hexo-theme-next 主题,十分简洁,clone 到 themes目录中即可:

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

hexo 官方的主题 https://hexo.io/themes/
部分主题介绍:

Anodyne 主题

$ git clone https://github.com/klugjo/hexo-theme-anodyne

litten/hexo-theme-yilia 主题:

$ git clone https://github.com/litten/hexo-theme-yilia
6.1.2、启用主题

打开 _config.yml文件,找到“#Extensions”,把默认主题 landscape修改为刚刚clone的主题:

theme: next # 启用 NexT 主题

到此,NexT 主题安装完成。

接下来用 hexo clean 来清除 Hexo 的缓存。

6.1.3、验证主题

执行以下命令,注意观察命令行输出是否有任何异常信息。

hexo s --debug

输出如下:

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000,检查博客主题是否启用成功。

注意:NexT主题的详细配置信息请参考NexT网站。
【提示】http://username.github.io 里有两个 config.yml 文件,一个在根目录,一个在 theme 下,现在修改的是在根目录下的。

6.1.4、更新主题

git bash 里执行

$ cd themes/主题名
$ git pull
6.1.5、本地查看调试

每次修改都要 hexo g 生成一下

$ hexo g # 生成
$ hexo s # 启动本地服务,进行文章预览调试,退出服务用Ctrl+c
6.2、主题设定(该部分设置theme下的config.yml 文件中)
6.2.1、选择 Scheme

Scheme是NexT提供的一种特性,借助于 Scheme,NexT为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT支持三种Scheme:

Muse - 默认 Scheme,这是NexT最初的版本,黑白主调,大量留白

Mist - Muse 的紧凑版本,整洁有序的单栏外观

Pisces - 双栏 Scheme,小家碧玉似的清新

搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。

6.2.2、设置 语言
language: zh-Hans
6.2.3、设置 菜单

Anodyne 修改导航栏

这次我们要修改的不是之前修改的全局的配置文件,而是主题下的配置文件themes/anodyne/_config.yml,在主题中找到menu字段,因为这边我们主要有两个页面,一个是首页还有是一个是归档页面,About和Contact没有对应页面,所以将About和Contact的路由都改为了首页,即/。

NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。

1.第一是菜单项(名称和链接)

设定菜单内容,对应的字段是 menu 。
若你的站点运行在子目录中,请将链接前缀的 / 去掉

menu:
  home: / # 主页
  archives: /archives # 归档页
  #about: /about # 分类页
  #categories: /categories # 标签页
  tags: /tags # 关于页面
  #commonweal: /404.html # 公益 404
2.第二是菜单项的显示文本

设置菜单项的显示文本,在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在NexT 主题目录下的 languages/{language}.yml ({language} 为你所使用的语言)。
以简体中文为例,若你需要添加一个菜单项,比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml

在 menu 字段下添加一项:

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料
3.第三是菜单项对应的图标。 设定菜单项的图标,对应的字段是 menu_icons 。

此设定格式是 item name: icon name,其中 item name 与上一步所配置的菜单名字对应,icon name 是 Font Awesome 图标的 名字。
而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。

menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

在菜单图标开启的情况下,如果菜单项与菜单未匹配(没有设置或者无效的 Font Awesome 图标名字) 的情况下,NexT 将会使用 作为图标。
请注意键值(如 home)的大小写要严格匹配

6.2.4、设置 侧栏

可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。

1.设置侧栏的位置,修改 sidebar.position 的值,支持的选项有:
left - 靠左放置
right - 靠右放置
目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。

sidebar:
  position: left
2.设置侧栏显示的时机,修改
sidebar.display 的值,支持的选项有:
post - 默认行为,在文章页面(拥有目录列表)时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏(可以手动展开)
remove - 完全移除
sidebar:
  display: post
已知侧栏在 use motion: false 的情况下不会展示。 影响版本5.0.0及更低版本。
6.2.5、设置 头像

编辑 主题配置文件, 修改字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:

地址值:完整的互联网URI

http://example.com/avatar.png
站点内的地 将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png 或者 放置在 source/images/ 目录下 配置为:avatar: /images/avatar.png
avatar: http://example.com/avatar.png

6.2.6、设置 作者昵称

编辑 站点配置文件, 设置 author 为你的昵称。

6.2.7、站点描述

编辑 站点配置文件, 设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

7、添加功能

7.1、更改配置
7.1.1、给文章贴标签

首先需要确认全局的配置文件_config.yml中有tag_dir: tags,确认过之后就可以新建tags页面啦。命令为:

$ hexo new page tags

此时会在全局的source文件下新建文件夹tags文件夹,修改tags/index.md文件

title: tags
date: 2018-06-06 12:15:14
type: “tags”
全局设置好标签之后就可以给文章贴标签了,在文章的.md文件中添加:

tags:
- tag1
- tag2
添加过之后,头部如下:

title: test_md
date: 2018-06-06 12:18:25
tags: tag1
7.1.2、设置文章分类
给文章设置分类与上面介绍的设置标签类似,也需要首先确认一下全局的配置文件_config.yml中有category_dir: categories,接着新建categories文件

$ hexo new page categories
此时会在全局的source文件下新建文件夹categories文件夹,修改 categories/index.md 文件

title: 文章分类
date: 2018-06-06 12:19:16
type: “categories”
设置好全局的分类之后,就可以设置文章的分类了,在文章的.md文件中添加:

categories:
- category1
- category2
添加过之后,头部如下:

title: test_md
date: 2018-06-06 12:20:35
categories: cate1
7.1.3、博客内代码高亮
hexo 默认已经实现了代码高亮,但是它存在一些局限性,某些情况下无法高亮,而且界面也比较丑,所以最后还是选择了 highlight.js 这个库。这个库的使用也很简单,具体步骤如下:

我们上面介绍了hexo自带高亮,所以需要先关闭自带高亮,在全局配置文件_config.yml 中将 highlight 的 enable 字段设置为 false 。
接着要引入 highlight.js 的 css 和 js ,具体的引入位置在主题模版中的之间,我使用的 Anodyne 风格写在了主题的 layout 文件夹中的 layout.ejs 文件内,具体代码如下:

在 highlight.js 官方文档可以看到,它有很多代码风格,我们可以根据自己的喜好来选择,因为平时经常看 github 的代码,所以我这边选择的是 github 风格。

最后,还要对 highlight 进行初始化,位置在之前的中引入
hljs.initHighlightingOnLoad();
7.1.4、添加代码行号
处理完代码高亮之后,很自然的想让插入的代码带有行号,所以我们接下来就介绍一下怎样添加代码行号。这边我们使用库 highlightjs-line-numbers.js ,具体步骤如下:

首先是引入库,这里有两种方式:
第一种是,执行命令

$ npm install highlightjs-line-numbers.js
第二种是,通过script的方式引入

其实比较规范的操作应该是通过 npm install 的方式来引入,这样作者有更新,我们可以拉到最新代码,但是这里我为了跟 highlight 保持一致,使用了第二种方式。
在 highlight 之后对行号插件进行初始化,代码为:

hljs.initLineNumbersOnLoad();
如果行号的样式我们不喜欢,可以通过更改CSS的方式来改变,这边仍然以Anodyne风格为例,我在 anodyne/source/css/partial/_highlight 文件中加入了如下代码:

td.hljs-ln-numbers
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
text-align: center
color: #ccc
border-right: 1px solid #CCC
vertical-align: top
padding-right: 5px
width: 20px
td.hljs-ln-code
padding-left: 10px
.content table tr:not(:last-child) td
border-bottom: 0px solid #eee
注意这边要是 styl 的格式来编写代码,可是 .styl 貌似不支持高亮
另外,还有一个小功能,就是如何将文字缩进,这边我常用的方法就是输入两个   或者  

7.2、集成常用的第三方服务
7.2.1、百度统计
注意: baidu_analytics 不是你的百度 id 或者 百度统计 id

登录 百度统计, 定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id
编辑 主题配置文件, 修改字段 baidu_analytics 字段,值设置成你的百度统计脚本 id。

7.2.2、阅读次数统计
为NexT主题添加文章阅读量统计功能

7.2.3、Algolia 搜索
第三方服务 - Algolia

7.3、插件
7.3.1、安装插件
安装插件:npm install 插件名 –save
卸载插件:npm uninstall 插件名
更新插件和博客框架:npm update
执行以下命令安装 RSS 插件

npm install hexo-generator-feed --save
生成站点地图

npm install hexo-generator-sitemap --save
生成百度站点地图

npm install hexo-generator-baidu-sitemap --save
SEO优化

npm install hexo-generator-seo-friendly-sitemap --save
HTML压缩

npm install hexo-html-minifier --save
CSS压缩

npm install hexo-clean-css --save
JS压缩

npm install hexo-uglify --save
imagages压缩

npm install hexo-imagemin --save
7.3.2、插件开启配置
根目录下的 _config.yml ,添加以下代码:

RSS

feed:
type: atom
path: atom.xml
limit: 20

sitemap

提交给谷歌搜素引擎,SEO优化开启配置是一样的

sitemap:
path: sitemap.xml

提交百度搜索引擎

baidusitemap:
path: baidusitemap.xml

HTML压缩

html_minifier:
exclude:

css压缩

clean_css:
exclude:

  • ‘*.min.css’

js压缩

uglify:
mangle: true
output:
compress:
exclude:
- ‘*.min.js’

image压缩

imagemin:
enable : true
interlaced : false
multipass : false
optimizationLevel: 2
pngquant : false
progressive: false
package.json 可以看安装了哪些插件。
Hexo Seo 优化让你的博客在google搜索排名第一

8、可能出现的错误
安装 heox 时报错: YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key at line 5, column 1: # Site
YAMLException: cannot read a block mapping entry; a multi line key may
not be an implicit key at line 13, column 1: # URL 启动 hexo
时包上面的错误时,你们都是配置文件:_config.yml 中 # Site #URL 属性设置后面的:需要有空格再填写内容!!!
如果按照流程步骤 执行 hexo server 没有反应,说明你少了 npm install 这部,没有安装 hexo server 模块
本地浏览没问题,Deploy 报错
Git 环境配置错误 问题描述:
Windows系统出现报错信息如下 [info] Start deploying: git [info] Setting up Git deployment… [error] Error: spawn ENOENT Error: spawn ENOENT
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34) events.js:72
throw er; // Unhandled ‘error’ event
^Error: spawn ENOENT
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34) 解决方案: 检查 Git 的相关配置,将 git 所在目录添加到系统 path 中去。
Deploy 设置错误 问题描述: 输入 hexo deploy 后,出现错误信息: ‘github’ does not appear to be a git repository 解决方案:
检查 _config.yml 中 deploy 设置。参见http://hexo.io/docs/deployment.html。
删除 .deploy_git 文件夹并且执行 hexo clean 后,重新 hexo deploy 。
Deploy之后,页面长时间404 解决方案: 检查 Github Pages 类型 个人主页 也就是库的名称为 yourname.github.io 的主页,页面文件应当在 master 分支下,文件结构可以参考我的主页,也就是应当以 HTML 文件为主,是没有 Markdown 文件的。
项目主页
也就是库名不是 yourname.github.io 的主页,页面文件应当在 gh-pages 分支下,文件结构与个人主页基本一致,同样没有 Markdown 文件。
检查 Github 验证邮件 曾经出现过所有操作都没有问题但就是404的状况,新创建的用户最好都去看看是不是验证邮件没有通过。 注意库的名字
现在大多改成 .io 结尾域名了,但是不确定是不是真的跟这个有关,最好改成 .io。
自有域名二级目录无法访问 问题描述 参见 issue820 问题分析
问题出在 CNAME 跳转,下面附上我的分析,如果不感兴趣可以直接翻到解决方案。
如果没有 CNAME 跳转,访问 yourname.github.io/repo 会自动地去访问 gh-pages 分支下的静态文件。
但是一旦进行了 CNAME 跳转,访问 yourname.github.io/repo 就会自动跳转为 yoursite.com/repo,
显然在你的博客目录下是没有这个文件夹的,所以自然而然的会出现访问404错误。 解决方案 增加一个新的 DNS 记录
修改自己域名的DNS记录,增加一条记录(A 记录或者 CNAME 都可以,指向 github),内容是 repo.yoursite.com,访问时通过 repo.yoursite.com 来访问。
将这个库移动到博客目录下
按照上述的分析,把这个库的 repo 移动至博客目录下即可。注意修改 html 以免被 hexo 再次渲染,还有如果是直接复制或者 clone ,注意删除隐藏的 .git 文件夹。
Hexo命令失效 解决方案: 检查 _config.yml 中的内容,特别注意:后面需要有一个空格。 检查 `package.json’ 中的内容,注意添加 hexo 信息用来标识这是一个 hexo 目录:{ “hexo”: {
“version”: “” } } 如果还是有问题,可以更新 hexo 之后,在新的文件夹中重新进行 hexo init。
Hexo所有命令报错 问题描述: 参见 Issues832 解决方案:
仔细检查 _config.yml 文件中所有冒号后面的空格,格式很严格,必须是只有一个,半角。不管是多了还是少了都会报错,这是 yml 解释器所定义的语法。如果不确定的话,将输入法调整到英文模式,删除所有冒号后面的空格重新输入,不要使用 Tab 。
修改主题文件之后,网页不更新 问题描述:在修改主题文件之后,页面的文件依然没有更新。 解决方案: hexo clean 并且删除 .deploy_git 文件夹之后,hexo d -g 。为了强制浏览器更新资源文件,可以采用 ’Ctrl+F5’ 来刷新。

9、命令总结

9.1、Hexo 命令

Hexo常用命令总结:

hexo help # 查看帮助
hexo init # 初始化一个目录
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成网页,可以在 public 目录查看整个网站的文件
hexo server # 本地预览,'Ctrl+C'关闭
hexo deploy # 部署.deploy目录
hexo clean # 清除缓存,强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹
简写:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
编辑文章,新建文章

hexo new "标题"
在 _posts 目录下会生成文件标题.md

title: Hello World
date: 2015-07-30 07:56:29 #发表日期,一般不改动
categories: hexo #文章文类
tags: [hexo,github] #文章标签,多于一项时用这种格式
正文,使用 Markdown 语法书写
编辑完后保存,hexo server 预览
hexo部署
执行下列指令即可完成部署。

hexo generate
hexo deploy
hexo deploy问题:Deployer not found: git
执行

npm install hexo-deployer-git --save
重新deploy即可
以下提示说明部署成功
[info] Deploy done: git
点击 Github 上项目的 Settings,GitHub Pages,提示 Your site is published at (域名)

常用的组合命令:

hexo d -g // 生成和部署
hexo s -g // 生成和预览

注意:Hexo 的详细信息请参考 Hexo网站。

9.2、图床

1.推荐七牛云储存,注册地址。

2.七牛云储存提供10G 的免费空间,以及每月10G 的流量.存放个人博客图片最好不过了

3.七牛云储存还有各种图形处理功能、缩略图、视频存放速度也给力。

具体使用见使用七牛作为github博客的图床

9.4、域名

将独立域名与GitHub Pages的空间绑定

方法一:在站点 source 目录下面,新建一个名为 CNAME 的文本文件,里面写入你要绑定的域名,比如 http://wuxiaolong.me

方法二:在 Repository 的根目录下面,新建一个名为 CNAME 的文本文件,里面写入你要绑定的域名,比如 http://wuxiaolong.me

9.5、DNS设置

用 DNSpod,快,免费,稳定。
注册 DNSpod ,添加域名,如下图设置。
其中 A 的两条记录指向的ip地址是 github Pages 的提供的ip去 Godaddy 修改 DNS 地址
更改 godaddy 的 Nameservers 为 DNSpod 的 NameServers。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值