zoukankan      html  css  js  c++  java
  • Github+Hexo,搭建专属网站

    前言

    记得从大二开始,就一直想搭个专属网站,当时使劲抠页面【前端页面是从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。
    源代码文件位置为:icarussourcecss _variables.styl


    文章目录

    icarus主题模板的文章详细展示默认是不带有文章目录的
    如果需要添加文章目录,可以参考http://www.jianshu.com/p/72408c410904

    icarus主题添加文章目录,修改themesicaruslayoutcommonarticle.ejs文件即可。

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

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

    ...
    title: Github+Hexo,搭建专属网站
    categories:
      - demo
    toc: false
    ...
    
  • 相关阅读:
    数学之矩阵快速幂
    数学篇之高斯消元
    P1033自由落体
    P1258小车问题
    P1072Hankson的趣味题
    P2837晚餐队列安排
    P3811 乘法逆元
    P1002过河卒
    P1507 NASA的食物计划
    P1079 Vigenère 密码
  • 原文地址:https://www.cnblogs.com/wangxin37/p/6397722.html
Copyright © 2011-2022 走看看