github+hexo建站教程

前言

之前一直羡慕那些拥有自己个人网站的人，一直想搭建属于自己的个人网站，也是想为自己的成长做个记录。

什么是Hexo ？

Hexo是一款基于Node.js的静态博客框架，依赖少、易于安装使用，可以方便的生成静态网页托管在GitHub上。Hexo是GitHub上的开源项目，参见：Hexo的Git。如果想了解更加全面的Hexo，可以到其官网Hexo了解。因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

搭建步骤

• GitHub创建个人仓库
• 安装Git
• 安装Node.js
• 安装Hexo
• 将 GitHub 和 Hexo 关联起来

GitHub创建个人仓库

登录到GitHub，如果没有GitHub账号，注册一个GitHub账号：GitHub,如下图所示创建个人仓库，仓库名应该为：用户名.github.io，[注：这是固定写法]，比如我的仓库名为：celesteting.github.io

 

 

安装Git

什么是Git？简单来说Git是开源的分布式版本控制系统，我们网站在本地搭建好了，需要使用Git同步到GitHub上。如果想了解Git的细节，参考廖雪峰老师的Git教程：Git教程。从Git官网下载Git-安装包 ，下载后安装，在命令行输入git测试是否安装成功，安装成功后，将Git与GitHub账号绑定，鼠标右键打开Git Bash Here。

 

 

 

设置user.name和user.email配置信息

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

生成ssh密钥文件

$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可，默认不需要设置密码 然后找到生成的.ssh文件夹中的id_rsa.pub密钥，将内容全部复制，

 

 

打开GitHub_Settings_keys页面，新建new SSH Key，Title为标题，随意填即可，将刚刚复制的id_rsa.pub内容复制进去，最后点击Add SSH key。

 

 

在Git Bash检测GitHub公钥设置是否成功

$ ssh git@github.com

如下图说明成功:

 

 

 

安装Node.js

Hexo基于Node.js，Node.js下载地址：Node.js下载地址,安装后，

检测Node.js是否安装成功

$ node -v

检测npm是否安装成功

$ npm -v

安装Hexo

Hexo就是我们个人博客的框架，这里需要在自己的电脑里创建一个文件夹，这里我命名为wangzhan，Hexo框架与以后你自己发布的网站都在这个文件夹中，创建好后，进入文件夹中 -> Git Bash Here -> 使用npm命令安装Hexo

$ npm install -g hexo-cli

 

这个安装时间较长（耐心等待中），安装完成后，初始化我们的博客，输入：

$ hexo init Hexo

上面的指令会生成一个名为Hexo的文件夹 

为了检测网站的雏形，在Hexo中分别按顺序输入一下三条命令：

$ hexo new test
$ hexo g
$ hexo s

完成后在浏览器输入: http://localhost:4000/ 可以看到我们写出的第一篇博文test。

常用 Hexo 命令

• hexo n “我的博文” #新建文章
• hexo generate 也可简写成 hexo g #生成
• hexo server 也可简写成 hexo s #启动服务预览（监视文件变动并自动更新，无需重启服务器）
• hexo deploy 也可简写成 hexo d #部署
• hexo server -s #静态模式
• hexo server -p 5000 #修改端口
• hexo server -i 192.168.1.1 #自定义IP
• hexo clean #清楚缓存

将 GitHub 和 Hexo 关联起来

在Hexo根目录里_config.yml文件成为站点配置文件，打开_config.yml修改deploy:

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

保存站点配置，其实就是然hexo知道你要把Hexo部署在哪个位置，很明显，我们部署在我们GitHub仓库里，最后安装Git部署插件

$ npm install hexo-deployer-git --save

这时，我们分别输入三条命令，即可在通过xxx.github.io看到我们的博客了。

$ hexo clean
$ hexo g
$ hexo s

hexo博客在localhost:4000无法访问：

可以试试

• hexo clean #清楚缓存
• hexo server 也可简写成 hexo s #启动服务预览（监视文件变动并自动更新，无需重启服务

如果还是不行：

解决方法：

https://blog.csdn.net/jkxqj/article/details/51620725

如果不行的话，那就是你指令命令的时候没按要求在特定的文件夹中执行

https://segmentfault.com/q/1010000003870970

不过当时我出错的时候改端口也没用

在网上查了下资料，都说是IIS服务器问题 。需要在控制面板中打开 

https://www.jianshu.com/p/3506c3f9fdb5

后来也没改好，可以试试

下面按要求做一定不会出错

Hexo个性化配

更换主题

我是真的不喜欢Hexo默认的主题，Hexo提供了很多主题,我使用的是Oishi主题，在Hexo目录（即自己创建博客的文件夹）中打开命令行，输入如下，下载Oishi主题到Hexo目录中themes下的Oishi文件夹中。

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

打开Hexo的_config.yml配置文件，将theme修改如下:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Oishi

网站配置

网站基本配置

在Hexo的_config.yml中配置,注意timezone要在时区列表中选取，因为刚开始以为是随便写，写个了Shenzhen发现hexo g一直报错...

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Celeste's Blog   #网站标题
subtitle: Better Me     #网站副标题
description: Better Me  #网站描述（主要用于SEO）
author: Huiting Cai     #作者
language: zh-Hans       #网站使用语言（zh-Hans显示简体中文）
timezone: Asia/Shanghai #网站时区，Hexo默认使用您电脑的时区。

网站其他配置

网站刚开始创建的时候导航只有“首页”、“归档”、“标签”，而且点击“标签”会报404错误。

处理点击“标签” 404错误

因为不存在标签这个页面，所以报404错误。此时需要给创建一个tags页面。

$ hexo new page "tags"

重新发布后，发现点击“标签”显示正常

给导航增加选项，如“分类”

在 Hexo\themes\Oishi\ _config.yml 找到menu:

menu:
  home: /
  categories: /categories/
  #about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404/

在git shell中new一个“分类”页面，否则点击导航的“分类”会报404错误

$ hexo new page "categories"

去掉footer的由 Hexo 强力驱动，主题等信息

编辑 Hexo\themes\Oishi\layout\ _partials\footer.swig ，将以下代码删掉（注：因为我用的是Oishi主题，所以要删选择对应主题中的layout\ _partials\footer.swig即可）

这段代码不完全一样不过大同小异

{% if theme.copyright %}
  <div class="powered-by">
    {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
  </div>

  <span class="post-meta-divider">|</span>

  <div class="theme-info">
    {{ __('footer.theme') }} &mdash;
    <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
      NexT.{{ theme.scheme }}
    </a>
  </div>
{% endif %}

 转自：https://juejin.im/post/5b3ed1d4e51d45194e0b7884