Github

hexo+Github Pages搭建网站

一、网站雏形搭建

  1. 安装Git Bash

    1
    git version	（检查安装是否成功）

  2. 安装NodeJs

    1
    node -v	（检查安装是否成功）

  1. 安装hexo

    1
    sudo npm i -g hexo	（安装hexo的命令）

  2. 初始化hexo

    新建一个文件夹，用于保存博客内容，然后在该文件夹下右键选择git bash执行以下命令：

    1
    hexo init

    初始化之后会出现如图示文件：

    主要文件的意思为：

    • scaffolds：博客文章的模板，默认为post.md
    • source：要上传到网站上的博客文章
    • themes：博客的主题
    • _config.yml：整个博客的站点配置文件

  3. 生成SSH并添加到github

    • 创建一个repo，名称为YourgithubName.github.io, 其中YourgithubName必须是github名称。

    • 右键点击git bash，按如下命令设置信息

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

    • 生成ssh密钥文件

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

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

    • 打开GitHub_Settings_keys 页面，新建new SSH Key，将上述复制的内容粘贴进去即可

    • git里输入输入ssh git@github.com命令检查是否成功

  4. 修改_config.yml站点配置文件

    1
    2
    3
    4
    deploy:
      type: git
      repo: git@github.com:YourgithubName/YourgithubName.github.io.git
      branch: master

  5. 部署项目

    1
    2
    3
    hexo clean	#清除缓存，若是网页正常情况下可以忽略这条命令
    hexo g	#生成（将本地hexo文件传到了github仓库）
    hexo s	#预览发布后的效果

    打开链接http://localhost:4000就可以看到预览的效果了。

  6. 安装Git部署插件

    1
    sudo npm install hexo-deployer-git --save

    输入以下命令就可以在网址http://YourgithubName.github.io上面看到初步成型的博客网站了：

    1
    2
    3
    hexo clean 
    hexo g 
    hexo d #部署项目

二、主题下载

三、站点配置文件_config.yml的修改

  • 修改theme名称

    theme: 后面改为hueman

  • 修改语言

    language: 后面改为zh-CN

  • 修改title

    这个会在你主页上，显示在浏览器框中的网页名称

  • 修改subtitle副标题

    博客logo边上的文字说明

  • 修改author

    author: 后面添加你自己的名字（这个会在网站底部显示）

四、主题配置文件修改themes的_config.yml

一切修改参考该主题文档，https://github.com/ppoffice/hexo-theme-hueman/wiki

菜单menu

  • 网站logo修改

  • width: 146.5

    height: 60.5
url: images/header.png

    将原网站logo换成了自己设计的logo图片，尺寸与原logo尺寸接近。图片存放在了hueman/source/css/images里，应修改相应的图片宽高和名称目录；

  • 菜单栏中类别的添加会依据文章的Categories: 的类别自动将该类别添加到菜单栏中；

  • 主题颜色修改theme_color: ‘#008B8B’

    这是颜色的16进制表示，具体对应的颜色可参照链接http://www.sioe.cn/yingyong/yanse-rgb-16/

  • 社交链接修改

    只留下github、微博、RSS（RSS设置的链接写了科大bbs实习板块的链接）

  • Swiftype账户注册，install key复制并保存到项swiftype:

分享设置

  • share: jiathis

    文档里有介绍

关闭评论

  • markdown里设置comments: false即可

链接miscellaneous

  • 修改为自己Medium、知乎、CSDN的三个链接

五、发布文章

文章模板（已将默认的post.md模板替换）

1
2
3
4
5
6
7
8
9
---
title: linux双系统安装
date: 2017-04-07 16:31:25
category: 软件安装
tags: hexo
thumbnail: 
comments: false
toc: true
---

上面的博客模板中（即front-master的各项），

  • category: 是该文的所属类别
  • tags: 是该问所属标签
  • thumbnail: 后面是该文的缩略图对应的链接
  • comments: 设置为false，是因为关注了Disqus评论系统
  • toc: 设置为true，是指在阅读文章时，左侧会展现出文章的目录结构（如下图所示）

这里的分类、标签、缩略图设置、评论设置，自己摸索了好几个小时才搞清楚！！！

关于文章的缩略图

两种方法：

  • 上述模板中的方法（这种方式原文就不会出现该图片了）
  • 第二种是主题会自动以文章中的第一张图片为缩略图，这种情况下原文是出现该图片的；

关于文章中的图片

图片从本地的文件夹中写到markdown博文中，然后将文件放到 _posts目录下，这样最后是显示不出图片的；

正确做法：

相关参考：

http://lyonup.github.io/2016/05/04/markdowm-image-hosting/

发布文章

  1. 将写好的markdown格式文章放到自己本地所建reposity的source/_posts目录下即可；（如：我的是E:\Blog\luqiang6q.github.io\source\ _posts）
  2. 在_posts文件夹下，也可以再继续新建文件夹分类放博客文件，不影响最后的发布；
  3. 在_posts文件夹下，使用bash，执行以下命令即可
1
2
3
hexo g	#生成
hexo s	#预览发布后的效果
hexo d	#部署项目-预览无误后再部署

如果遇到部署完后打开网页出现404的情况，则可以把对应博文文件夹先删除，然后部署，然后再重新把对应的博文文件夹放回来，再重新部署即可。（当然，网页域名不跟github账号一样的话，也会产生这样的问题）

用hexo new+文章标题命令，会在_posts文件夹下新建一个包含默认模板的文章；

后续待更新

  • 评论系统
  • 站长统计

参考

hexo中文文档：https://hexo.io/zh-cn/docs/writing.html

http://visugar.com/2017/05/04/20170504SetUpHexoBlog/

分享到： QQ空间 新浪微博 腾讯微博 人人网 微信