zoukankan      html  css  js  c++  java
  • 3min快速使用Hexo+GitHub搭建免费博客

    准备工作

    至于为什么使用Hexo,而不使用Jekyll,网上已经做了一些比较,这里就不在赘述。

    由于是免费博客,本篇文章暂不涉及域名申请。

    在开始之前,已有的资源包括:

    1. 申请GitHub账户
    2. 安装Node.js
    3. 安装Git

    环境检测

    输入以下命令有返回版本号,说明Node.js环境配置正确:

    1 node -v
    2 npm -v

    安装Hexo

    首先在D盘符下建立hexo文件夹,配置完成后博客资源存放路径:

    D:hexolog

    依次输入以下命令:

    1 cd D:/hexo
    2 npm install hexo-cli -g
    3 hexo init blog
    4 cd blog
    5 npm install
    6 hexo g #或者hexo generate 
    7 hexo s #或者hexo server,可以在http://localhost:4000查看

    常见命令:

    1 $ hexo new "postName"      #新建文章
    2 $ hexo new page "pageName" #新建页面
    3 $ hexo generate            #生成静态页面至当前目录下的public目录
    4 $ hexo server              #启动本地web服务,用于博客的预览,开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    5 $ hexo deploy              #部署博客到GitHub
    6 $ hexo help                #查看帮助
    7 $ hexo version             #查看Hexo的版本

    缩写:

    1 $ hexo n == hexo new
    2 $ hexo g == hexo generate
    3 $ hexo s == hexo server
    4 $ hexo d == hexo deploy

    组合命令::

    1 $ hexo s -g #生成并本地预览
    2 $ hexo d -g #生成并上传

    打开http://localhost:4000已经可以看到一篇内置的blog。

    Hexo主题配置

    以主题yilia为例进行说明。

    安装主题

    1 $ hexo clean
    2 $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

    这是官方主题,其他主题还有:

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

    启用主题

    修改hexo目录下的_config.yml配置文件中的theme属性,将其设置为yilia,然后重新执行hexo g来重新生成。

    如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发布。

    更新主题

    1 $ cd themes/yilia
    2 $ git pull
    3 $ hexo g # 生成
    4 $ hexo s # 启动本地web服务器

    部署Hexo到Github Pages

    首先在Github上创建特别的repository,命名为yourname.github.io,yourname改成你自己取的名字。

    部署到github的原理:

    1. 之前步骤中在Github上创建的那个特别的repo,一个最大的特点就是其master中的html静态文件,可以通过链接http://yourname.github.io来直接访问。
    2. hexo -g 会生成一个静态网站(第一次会生成一个public目录),这个静态文件可以直接访问。
    3. 需要将hexo生成的静态网站,提交(git commit)到github上。

    使用hexo deploy部署

    部署到github,需要在blog根目录下的站点配置文件_config.xml中作如下修改:

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

    就是给hexo d 这个命令做相应的配置,让hexo知道要把blog部署在哪个位置。

    最后安装Git部署插件,输入命令:

    $ npm install hexo-deployer-git --save

    这时,分别输入三条命令:

    1 hexo clean 
    2 hexo g 
    3 hexo d

    你会发现你的博客已经上线,可以在网络上被访问了。

    发布文章

    定位到blog根目录,正式发布上线博客文章,在命令行中输入:

    $ hexo n "postName" #新建文章

    发现在blog根目录下的source文件夹中的_post文件夹中多了一个postName.md文件,使用Markdown(锤子科技锤子便签教程不错)编辑器打开,就可以开始你的个人博客之旅了。

    通过带有预览样式的Markdown编辑器实时预览书写的博文样式,也可以通过命令:

    $ hexo s --debug 

    在本地浏览器的http://localhost:4000预览博文效果。

    默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?答案是在合适的位置加上<!--more-->即可。

    写好博文并且样式无误后,通过以下命令:

    1 $ hexo g 
    2 $ hexo d

    生成、部署网页,然后随后可以在浏览器中输入域名浏览。

    网站具体配置参看官方文档

    保留CNAME、README.md等文件

    提交之后网页上一看,发现以前其它代码都没了,此时不要慌,一些非md文件可以放到source文件夹下,这里的所有文件都会原样复制(除了md文件)到public目录。

    由于hexo默认会把所有md文件都转换成html,包括README.md,所有需要每次生成之后、上传之前,手动将README.md复制到public目录,并删除README.html。

    寻找图床

    图床,当博文中有图片时,若是少量图片,可以直接把图片存放在source文件夹中,但这显然不合理的,因为图片会占据大量的存储的空间,加载的时候相对缓慢 ,这时考虑把博文里的图片上传到某一网站,然后获得外部链接,使用Markdown语法,![图片信息](外部链接) 完成图片的插入,这种网站就被成为图床。常见的简易的图床网站有:贴图库图片,国内算比较好的图床有两个:新浪微博和 七牛云

    参考:

    [1] https://zhuanlan.zhihu.com/p/26625249

    [2] https://div.io/topic/1691

    [3] https://github.com/limedroid/HexoLearning

    [4] http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa

    作者:longlively —— ONE STEP AT A TIME

    出处:http://www.cnblogs.com/longlively/

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    VIJOS1476 旅行规划(树形Dp + DFS暴力乱搞)
    神奇的图片
    How to locate elements/ Object locators for Android devices
    ZT: How to install appium with node.js
    How to get the appPackage and appActivity
    How to enable auto-complete for python in powershell
    Node.js
    Steps to develop an iterative algorithm
    Iterative Algorithm
    FSM
  • 原文地址:https://www.cnblogs.com/longlively/p/9165245.html
Copyright © 2011-2022 走看看