前言

在一次看到别人的博客主页,觉得设计很漂亮。但是由于自己对于前台这块没什么办法,煞是羡慕。偶然中发现这种样式是在Github上面搭建的,使用的是Next主题。于是便想自己也搭建一个,于是便去就去查询相关资料,在经历不少错误之后,终于搭建成功。

由于当时搭建的时候,没怎么记载,而且当初用的也不太熟。在使用了3个多月之后,趁着国庆这个时间将本博文写出来。如有不妥,欢迎指教!

注:其实搭建一个自己域名的博客,最大的作用就是提升了逼格…

效果图:

一、配置Hexo环境

1.下载并安装git

地址: https://git-scm.com/downloads

至于32位还是64位则看个人电脑情况选择了。

如果不会使用,可以看下我之前的博文:http://blog.csdn.net/qazwsxpcm/article/details/68946736

2. 下载并安装Node.js

http://nodejs.cn/

位数也依旧看个人电脑情况,安装成功之后,输入 node -v 和npm -v 可以查看是否安装成功。

注意:安装成功后需要重启电脑。

3. 配置hexo

1,新建文件夹,然后右键电脑盘符,点击git base。如:E:\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/ 可以查看本地预览





注:因为我已经配置好了NexT主题,所以显示的是该主题。正常会显示的Hexo默认的主题,借用了网上的一张贴图作为范例。

二、Hexo的相关配置

1.启用NexT主题

在成功配置完环境之后,hexo的目录结构如下。



在 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/xuwujing.png



至于作者呢称作者描述在我之前的截图上以及说明了,这里就不再多说了。

百度统计

地址:https://tongji.baidu.com/web/welcome/login

登录之后(没有则注册),然后新增网站,输入域名就行,然后会出现一串js代码,复制hm.js? 后面那串统计脚本 id , 然后粘贴到 主题配置文件 中的baidu_analytics 就行。

社交链接

编辑主题配置文件 中的 social 然后增加链接以及说明就行。

例如:csdn: http://blog.csdn.net/qazwsxpcm?viewmode=list

标签分类

在站点目录下,打开git bash,输入 hexo new page “categories” 创建分类。

输入:hexo new page “tags” hexo new page “about” 创建标签和关于。

创建玩在站点目录下的source文件夹下,会新增一个categories、tags、about的文件夹,里面有一个index.md文件,打开之后更改说明为中文,那么显示的也为中文。

comments可以设置为false,含义是打开分类页面,评论插件不显示。





我的配置,可以从该地址查看:https://github.com/xuwujing/xuwujing.github.io

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

1. 在github上面创建仓库

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

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

注: 因为我已经成功设置了。所以使用一个test测试仓库,用于截图和说明。实际仓库名称不要使用这种!!!



2.Hexo关联Github

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

设置git身份信息

在hexo目录右键git base 输入:

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



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

例如: git@github.com:xuwujing/xuwujing.github.io.git

3.发布博客

首先新建一篇博文。

如:hexo new post “Hello GitHub”

就会在\source\ _posts 将会看到 Hello GitHub.md 文件。

要发布的博客放在在\source_posts路径下。博客推荐使用markdown编辑,后缀名为.md。



在发布之前,先编辑该博客,写点描述。

---
title: Hello GitHub
date: 2017-10-05 14:50:33
categories: hello
tags: [hello,haha]
---

然后输入:

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博客了。



五、错误问题解决方案

1. FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 10, column 1:

检查_config.yml内容,特别注意:后面需要有一个空格。

2.若出现这个错误:ERROR Deployer not found : github

则安装hexo git插件

输入:npm install hexo-deployer-git –save

3.如果使用CNAME绑定域名之后,上传博客的时候,会将CNAME中的地址替换为日志,导致无法通过域名访问。

解决办法:重新设置CNAME 中的域名地址。

如果有更好的解决办法,请私信我。谢谢!

六、参考网址:

Hexo网站搭建: http://opiece.me/2015/04/09/hexo-guide/

https://xuanwo.org/2015/03/26/hexo-intor/

NextT主题使用: http://theme-next.iissnan.com/getting-started.html

NextT后续配置: http://www.jeyzhang.com/next-theme-personal-settings.html

域名绑定博客: https://jingyan.baidu.com/article/dca1fa6fa1e403f1a5405262.html

Hexo问题解决: http://xuanwo.org/2014/08/14/hexo-usual-problem/

在Github上面搭建一个自己域名的Hexo博客的更多相关文章

  1. 怎样搭建一个自有域名的 WORDPRESS 博客?

    博客搭建并不复杂,只是过程有点繁琐,适合喜欢折腾的人,主要有下面几个步骤: 新建一个博客文件 购买域名(Domain Name) 注册一个主机空间(Web Host) 域名解析(DNSPod) 安装W ...

  2. 技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客

    上次有人留言说,技术博客是程序员的标配,但据我所知绝大部分技术同学到现在仍然没有自己的技术博客.原因有很多,有的是懒的写,有的是怕写不好,还有的是一直想憋个大招,幻想做到完美再发出来,结果一直胎死腹中 ...

  3. 用 node.js 的 hexo 框架搭建一个支持 markdown 的静态博客系统

    1,Hexo如何在线可视化写博客:   可以试试这款插件 hexo-admin. 2,马克飞象:   一个非常好的 markdown 编辑器. 3,Hexo博客文章设置密码的方法: 首先,在Hexo中 ...

  4. 强大博客搭建全过程(1)-hexo博客搭建保姆级教程

    1. 前言 本人本来使用国内的开源项目solo搭建了博客,但感觉1核CPU2G内存的服务器,还是稍微有点重,包括服务器内还搭建了数据库.如果自己开发然后搭建,耗费时间又比较多,于是乎开始寻找轻量型的博 ...

  5. 【分分钟内搭建一个带用户系统的博客程序(一)用户系统】asp.net core的Identity真香,EF真香!

    不用不知道,一用香到爆. 老哥是个屌丝前端,但也想写点web应用耍一耍.之前弄过了NodeJs,也弄过JAVA,最近由于写游戏的原因用C#,索性上手一波asp.net core. 这篇博客记录的是,如 ...

  6. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  7. 使用wordpress搭建独立域名的个人博客或网站

    最近抽空闲时间搭建了一个独立域名的个人博客站点,基本过程如下: 一.准备工作: 1.准备一个独立的域名,我是从万网中注册的cn结束的域名:tuzongxun.cn,价格29元,根据个人选择,也有更高更 ...

  8. 基于 Github Actions 自动部署 Hexo 博客

    前言 前不久使用了 Hexo 搭建独立博客,我是部署在我的腾讯云轻量应用服务器上的,每次都需要 hexo deploy 然后打包.上传.解压和刷新 CDN,非常麻烦.我的服务器配置也不高 2C2G 无 ...

  9. GitHub入门(一)GIT配置与Hexo博客搭建

    首先安装配置Git环境,由于本人使用Windows操作系统所以从msysgit.github.io下载msysGit Windows版本,安装.(Mac一般自带Git) 安装的时候一般使用默认选项,其 ...

随机推荐

  1. Android中的intent属性

    android之Intent的七大属性 2015年04月03日 ⁄ Android ⁄ 共 14866字 ⁄ 字号 小 中 大 ⁄ 1条评论 Intent用于封装程序的“调用意图”.两个Activit ...

  2. YYHS-分数(二分+容斥)

    题目描述 KJDH是个十分善于探索的孩子,有一天他把分子分母小于等于n的最简分数列在了纸上,他想找到这些分数里第k小的数,这对于KJDH来说当然是非常轻易,但是KJDH最近多了很多妹子,他还要去找妹子 ...

  3. MAC 下虚拟主机的配置

    第一部分:httpd.conf 1:找到这段,改成如下这样 <Directory /> Options Indexes FollowSymLinks AllowOverride All O ...

  4. 计数排序(O(n+k)的排序算法,空间换时间)

    计数排序就是利用空间换时间,时间复杂度O(n+k) n是元素个数,k是最大数的个数: 统计每个数比他小的有多少,比如比a[i]小的有x个,那么a[i]应该排在x+1的位置 代码: /* * @Auth ...

  5. js with用法

    有标签的语句 with 语句用于设置代码在特定对象中的作用域. 它的语法: with (expression) statement 例如: var sMessage = "hello&quo ...

  6. filereader api 类型

    filereader类似XMLHttpRequest,只是它用来从文件系统读取文件,提供了不同的方法去读取文件数据:1.readAsText2.readAsDataURL3.readAsBinaryS ...

  7. PHP小技巧

    1.js获取服务器年月日 var date= '<?php echo date("Y-m-d",time())?>';//获取服务器年月

  8. 小白必看Python视频基础教程

    Python的排名从去年开始就借助人工智能持续上升,现在它已经成为了第一名.Python的火热,也带动了工程师们的就业热.可能你也想通过学习加入这个炙手可热的行业,可以看看Python视频基础教程,小 ...

  9. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  10. ASP.NET没有魔法——ASP.NET MVC 过滤器(Filter)

    上一篇文章介绍了使用Authorize特性实现了ASP.NET MVC中针对Controller或者Action的授权功能,实际上这个特性是MVC功能的一部分,被称为过滤器(Filter),它是一种面 ...