【Blog】在Github上面开源一个自定义域名的Hexo博客

一.配置环境

1.下载安装git

下载git链接:https://git-scm.com/downloads
注意要正确选择32位或64位。

2.下载安装Node.js

下载Node.js链接:http://nodejs.cn/download/
同上选择32位或64位。
安装成功之后,输入 node -v 和npm -v 可以查看是否安装成功。
重启电脑

3.配置Hexo

1.新建文件夹,右键电脑盘符,点击git base。如:D:\Github\hexo
2. 输入:

npm install hexo-cli -g 

安装hexo

hexo的其他命令

$ hexo g

完整命令是: hexo generate 用于生成静态文件

$ hexo s

完整命令是:hexo server 用于启动服务器,主要用来本地预览

$ hexo d

完整命令是:hexo deploy 用于将本地文件发布到github上

$ hexo n 

完整命令为hexo new 用于新建一篇文章

3.进入Git Bash,输入:

hexo init   

初始化仓库
4.安装依赖包 输入:

npm install 

成功之后输入:

hexo g 

和:

hexo s

5.在浏览器中输入 http://localhost:4000/ 可以查看本地预览

二.Hexo的相关配置

1.启用NexT主题

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

我们打开站点配置文件, 找到 theme 字段,并将其值更改为 next。
成功配置之后,稍微等一下,然后再次使用 git base 启动hexo,输入hexo g 和 hexo s 便可以看到Next主题以及成功使用。

2.NexT相关配置

外观设置
打开 主题配置文件,然后解除Scheme中的 # 注释,选择适合自己的主题。

Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
Mist - Muse 的紧凑版本,整洁有序的单栏外观
Pisces - 双栏 Scheme,小家碧玉似的清新

注意: 设置样式后面需要有一个空格

语言设置
打开站点配置文件 ,找到language,然后设置语音种类。
目前 NexT 支持的语言如以下表格所示:
语言 代码 设定示例

English	en	language: en
简体中文	zh-Hans	language: zh-Hans
Français	fr-FR	language: fr-FR
Português	pt	language: pt or language: pt-BR
繁體中文	zh-hk 或者 zh-tw	language: zh-hk
Русский язык	ru	language: ru
Deutsch	de	language: de
日本語	ja	language: ja
Indonesian	id	language: id
Korean	ko	language: ko

菜单设置
打开主题配置文件,找到menu,然后选择主菜单显示内容。
NexT 默认的菜单项有(标注 的项表示需要手动创建这个页面):
键值 设定值 显示文本(简体中文)

home	home: /	主页
archives	archives: /archives	归档页
categories	categories: /categories	分类页 
tags	tags: /tags	标签页 
about	about: /about	关于页面 
commonweal	commonweal: /404.html	公益 404

设置完之后,还需要设置对应菜单的相应的文本,也就是菜单的翻译。
找到languages/{language}.yml ,然后编辑进行相应的说明就行了。
如:设置的是语言是language: zh-Hans ,就打开zh-Hans.yml。

头像设置
在主题配置文件 中编辑 avatar 输入头像路径就行了。
images 在hexo/public/images中。
如: avatar: /images/ljnoit.png

百度统计
地址: https://tongji.baidu.com/web/welcome/login
登录之后(没有注册),然后新增网站,输入域名就行,然后会出现一串js代码,复制hm.js? 后面那串统计脚本 id , 然后粘贴到 主题配置文件 中的baidu_analytics 就行。

社交链接
编辑主题配置文件 中的 social 然后增加链接以及说明就行。
例如:https://blog.csdn.net/Ljnoit

标签分类
在站点目录下,打开git bash,输入 hexo new page “categories” 创建分类。
输入:hexo new page “tags” hexo new page “about” 创建标签和关于。
创建玩在站点目录下的source文件夹下,会新增一个categories、tags、about的文件夹,里面有一个index.md文件,打开之后更改说明为中文,那么显示的也为中文。
comments可以设置为false,含义是打开分类页面,评论插件不显示。

三.Hexo关联github以及将本地博客上传

1. 在github上面创建仓库

成功登录github后(未创建先行创建),创建一个仓库,仓库名称格式为 youname.github.io youname 为用户名 。例如:ljnoit.github.io

创建成功之后,点击该仓库,选择setting,然后拖到GitHub Pages界面来, 然后选择Choose a theme,随便选择一个主题之后。再次点击setting来到GitHub Pages来,可以发现出现了一个路径,访问该路径,便可以访问所设置的仓库的界面了。

2.Hexo关联Github

这个就和之前关联仓库的步骤差不多。

设置git身份信息
在hexo目录右键git base 输入:

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

在站点配置文件 中加上仓库地址,注意要加上.git

3.发布博客

首先新建一篇博文。
如:hexo new post “Hello GitHub”
就会在\source\ _posts 将会看到 Hello GitHub.md 文件。
要发布的博客放在在\source_posts路径下。博客推荐使用markdown编辑,后缀名为.md。

在发布之前,先编辑该博客,写点描述。然后输入:

hexo g //生成静态文件  
hexo s // 本地预览

然后输入:hexo d 发布到github上。
成功之后输入youname.github.io路径便可以看到该博文了。

四.注册域名以及绑定到Github上

首先登录阿里云,搜索域名或者在控制台找到域名。进入之后,首先查询你要申请的域名,如果查不到就表示可以注册。域名注册有很多后缀名,如果可以,推荐.com的。
成功申请域名之后,将域名和Github绑定,Github的IP地址是192.30.252.153或192.30.252.154。所以我们在填写解析的时候,就解析这个地址。至于Github是怎么找到我们的仓库的,这个在CNAME设置。
进入域名解析之后点击【新增解析】;依次填写相应内容。
“记录类型”选择A;”主机记录”填写www;”解析线路”选择默认;
“记录值”填写github提供的IP地址,192.30.252.153或192.30.252.154;
“TTL”默认10分钟,自己可以另行设置也可;
最后点击【保存】。

域名成功解析之后,在你Github上面的仓库中创建CNAME,然后输入你申请域名的地址。然后你再输入你的域名就可以访问Github博客了。

发布了21 篇原创文章 · 获赞 30 · 访问量 4285

猜你喜欢

转载自blog.csdn.net/Ljnoit/article/details/104043776
今日推荐