前言

记得从大二开始,就一直想搭个专属网站,当时使劲抠页面【前端页面是从QQ空间抠的,现在想抠估计没这么容易了】,写代码,忙活半天才把程序弄好。

可惜最终项目还是没上线,因为当时有两问题绕不开

  • 需要购买服务器【服务器太贵,现在便宜的阿里云服务器每月都需100左右】。
  • 需要运维管理【麻烦且危险,服务器宕了可能丢失数据】。

最近了解到 github + hexo 能完美解决上述问题,啥也不说了,直接开干 .


相关网站

搭建教程网上比比皆是,此处不累赘,下面是搭建过程中用到的相关网站:

hexo中文网站:https://hexo.io/zh-cn/docs/

hexo主题模板:https://www.zhihu.com/question/24422335

hexo+github搭建过程:http://www.jianshu.com/p/df3edc4286d2

Markdown 语法说明:http://www.appinn.com/markdown/

github绑定域名:http://www.jianshu.com/p/1d427e888dda


HEXO如何优化部署及管理

问题:使用hexo时,如果本地文件丢失或者想在其他电脑上修改博客怎么办?

方案:简单地说,每个想建立GitHub Pages的仓库,至少两个分支,一个hexo分支用来存放网站的原始文件,一个master分支用来存放生成的静态网页。

步骤如下:

1、创建仓库,Wasim37.github.io;

2、创建两个分支:master 与 hexo;

3、设置hexo为默认分支(因为我们只需要手动管理这个分支上的Hexo网站文件);

4、使用git clone git@github.com:Wasim37/Wasim37.github.io.git拷贝仓库;

5、在本地Wasim37.github.io文件夹下通过Git bash依次执行npm install hexo、hexo init、npm install 和 npm install hexo-deployer-git(此时当前分支应显示为hexo);

6、修改_config.yml中的deploy参数,分支应为master;

7、依次执行git add .、git commit -m “…”、git push origin hexo提交网站相关的文件;

8、执行hexo generate -d生成网站并部署到GitHub上。

本地修改

1、在本地对博客进行修改(添加新博文、修改样式等等)后,通过下面的流程进行管理:

依次执行git add .、git commit -m “…”、git push origin hexo指令将改动推送到GitHub(此时当前分支应为hexo);

2、然后才执行hexo generate -d发布网站到master分支上。

本地资料丢失或者想在其他电脑上修改博客

1、使用git clone git@github.com:Wasim37/Wasim37.github.io.git拷贝仓库(默认分支为hexo);

2、在本地新拷贝的Wasim37.github.io文件夹下通过Git bash依次执行下列指令:npm install hexo、npm install、npm install hexo-deployer-git(记得,不需要hexo init这条指令)。


安装错误记录

执行hexo d出现以下错误

解决方法:

_config.yml ——> deploy ——> repository

https://github.com/{username}/{username}.github.io.git 修改为

git@github.com:{username}/{username}.github.io.git


文章编辑工具

文章编辑工具一开始我使用的是subline,但因为没有快捷键及预览功能,后来选择了MarkdownPad。可最近发现新版的有道云笔记支持Markdown语法,果断换成了有道。

因为有道除了编辑功能,我更看重的是它对文章的二次备份.

有道云笔记MarkDown使用教程: http://note.youdao.com/iyoudao/?p=1895

其次文章图片如果不想托管在github,可以使用七牛云存储等图床工具。


模板自定义

我使用的博客主题为 icarus,对比可以发现,我在展示细节上做了一些自己的修改。

比如页面展示可以分为左中右三个区域,分别为profile-column,main-column和sidebar-column。

源代码三者宽度比例为3:7:3。为了突出正文,我改为了 2.3:8.4:2.3。

源代码文件位置为:icarus\source\css\ _variables.styl


文章目录

icarus主题模板的文章详细展示默认是不带有文章目录的

如果需要添加文章目录,可以参考http://www.jianshu.com/p/72408c410904

icarus主题添加文章目录,修改themes\icarus\layout\common\article.ejs文件即可。

<% if (!index && post.toc) { %>
修改为
<% if (!index && post.toc != false) { %>

每篇文章可以选择是否开放目录功能

...
title: Github+Hexo,搭建专属网站
categories:
- demo
toc: false
...

Github+Hexo,搭建专属网站的更多相关文章

  1. GitHub+Hexo 搭建个人网站

    GitHub+Hexo 搭建个人网站 转自 https://www.sufaith.com/article/561.html 一.创建GitHub Pages站点 GitHub Pages是一种静态站 ...

  2. GitHub+Hexo 搭建个人网站详细教程

    原文链接 GitHub+Hexo 搭建个人网站详细教程 前言: 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷.然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建 ...

  3. Github+Hexo,搭建专有博客

    前言 记得从大二开始,就一直想搭个专属网站,当时使劲抠页面[前端页面是从QQ空间抠的,现在想抠估计没这么容易了],写代码,忙活半天才把程序弄好. 可惜最终项目还是没上线,因为当时有两问题绕不开 需要购 ...

  4. github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...

  5. github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...

  6. 使用GitHub+hexo搭建个人独立博客

    前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...

  7. 使用GitHub+Hexo建立个人网站,并绑定自己的域名(Ubuntu环境下)

    参考链接: youngzn.github.io     hexo官网     博客:从jekyll到hexo    hexo建站小结  全过程  简洁过程 使用GitHub+Hexo建立个人网站,并绑 ...

  8. Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理

    这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建.OK,话不多说,开始我们的收官之战. 不知你想过没有,如果我们的文章少,一眼看完整个目录, ...

  9. Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计

    之前说了 next 主题的优化和接入评论系统.让我们完成了自己所需的页面风格和排版,也可让访问用户在每篇博文评论,完成博主和访问用户的交互. 本章我们继续讲解其他重要功能. 既然是一个网站,那么我们就 ...

随机推荐

  1. BZOJ2818 与 BZOJ2301【euler,线性筛,莫比乌斯】

    题目大意: 给一个范围[1,n],从中找出两个数x,y,使得gcd(x,y)为质数,问有多少对(x,y有序) 解法: 不难,欧拉函数练手题,可以定义集合P ={x|x为素数},那么我们枚举gcd(x, ...

  2. java 基础知识八 正则表达式

    java  基础知识八  正则表达式 正则表达式是一种可以用于模式匹配和替换的规范,一个正则表达式就是由普通的字符(例如字符a到z)以及特殊字符(元字符)组成的文字模式,它 用以描述在查找文字主体时待 ...

  3. Java异常处理机制 —— 深入理解与开发应用

    本文为原创博文,严禁转载,侵权必究! Java异常处理机制在日常开发中应用频繁,其最主要的不外乎几个关键字:try.catch.finally.throw.throws,以及各种各样的Exceptio ...

  4. 学习Sass笔记之概念篇

    1 什么是CSS预处理器 首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预 ...

  5. Python多层目录模块调用

    一. 引用模块在 父+级目录中: 1. 将导入模块所在目录(../model/模块)添加到系统环境变量path下,可添加多个 import syssys.path.append("../mo ...

  6. webpack搭建服务器,随时修改刷新

    前提:1.对webpack有一定了解,本文不做介绍 2.安装node.js 手把手操作: 1.创建一个名为webpack-server的文件夹(随便取的) 2.cd到当前文件夹:cd webpack- ...

  7. Dubbo的使用简介

    Dubbo是什么 官方定义 DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000, ...

  8. ES6入门

    整理了ES6常用的一些语法,跟大家分享(promise.generator什么的还没有梳理清楚,后续再更新...) 1⃣️ 变量声明-let 与 const (首先关于测试结果:这里有个小问题,如果用 ...

  9. .net应用程序中添加chm帮助文档打开显示此程序无法显示网页问题

    在做.net大作业时添加了chm帮助文档结果在打开时显示“此程序无法显示网页问题”,但是把帮助文档拷到别的路径下却显示正常, 经过从网上查找,终于找到了答案: (1).chm文件的路径中不能含有“#” ...

  10. iOS模式详解—「runtime面试、工作」看我就 🐒 了 ^_^.

    Write in the first[写在最前] 对于从事 iOS 开发人员来说,当提到 ** runtime时,我想都可以说出来 「runtime 运行时」和基本使用的方法.相信很多开发者跟我当初一 ...