美文网首页
用Hexo+Github+Coding搭建静态博客(一)

用Hexo+Github+Coding搭建静态博客(一)

作者: lifeColder | 来源:发表于2017-05-22 23:02 被阅读0次

    为什么搭建Hexo静态博客?

          Hexo是一款快速、简洁而且高效的博客框架,使用Markdown(或者其他渲染引擎)解析文章,在几秒内,既可以安装可利用的靓丽的主题生成静态页面

    我目前只在window系统下面操作过,Mac和linux没有操作过,不过原理应该是一样的,欢迎大家点评,不过以后要是在liunx或者Mac折腾的话,相信会继续更新哒!!
    关于Markdown的使用,请见这篇文章MarkDown学习笔记
    那么建立Hexo,你要具备什么知识呢?

    1. 知道npm包管理工具的基本使用
    2. 了解Git原理以及使用Git
    3. 知道Github page是如何实现的
    4. 域名分流是如何操作的

    其特点有:

    • 超快速度:Node.js所带来的超快生成速度,让上百个页面在几秒内瞬间完成
    • 支持Markdown:Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件
    • 一键部署:只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站
    • 丰富的插件:Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

    我觉得用 大象无形,大道至简 形容最好了!Hexo太容易就运行了呢!
    那还等什么,快开始Hexo探索之旅吧!!

    勤能补拙是良训,一分耕耘一分才      ——华罗庚

    在本地运行Hexo项目

    撸码时刻,准备兴奋!! 你的系统必须具备以下环境,否则,会安装失败的哟

    安装Node建议用nvm,nvm是node版本控制工具
    NVM安装成功后,执行 nvm install stable 就可以安装node了

    1、全局安装hexo
        npm install hexo-cli -g
    2、hexo命令生成一个博客雏形
        hexo init blog
    3、进入blog文件夹
        cd blog
    4、根据package.json安装依赖模块
        npm install
    5、启动hexo项目
        hexo server
    

    你的博客可以运行了吧,啊哈哈,有没有一种超快的赶脚?不过Hexo远不止于此,你离真正使用Hexo搭建一个个性化博客还是很远的呢,待我慢慢道来吧。
    如果想要自定义Hexo博客,请看我这篇文章哦 搭建Hexo博客进阶篇
    运行成功之后,把目标转向安装的文件夹,文件夹目录如下所示:

    .
    ├── _config.yml   //这里是网站的配置信息
    ├── package.json  //HEXO项目依赖
    ├── scaffolds     //模板文件夹
    |   ├──post.md    //文章模板
    |   ├──draft.md   //
    |   └──page.md
    ├── source       //资源文件夹,
    |   ├── _drafts
    |   └── _posts
    └── themes       // 主题文件夹。Hexo会根据主题来生成静态页面
    

    目录文件解释如下:

    目录/文件名 子文件名 作用 备注
    _config.yml --- 这里是网站的配置信息 ----
    package.json --- HEXO项目依赖 应用程序的信息,EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
    scaffolds post,draft,page(.md) 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。 模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
    source _drafts、_posts 资源文件夹是存放用户资源的地方 除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
    themes 主题配置相关 主题 文件夹。Hexo 会根据主题来生成静态页面。 ---

    Hexo的基本使用

    配置

    网站基本信息在 _config.yml 中配置 :

    网站

    Site
    title:       网站标题      
    subtitle:    网站副标题    
    description: 网站描述      
    author:      您的名字
    language:    网站使用的语言 zh-Hans,
    timezone:    网站时区  America/New_York, Japan, 和 UTC
    

    其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者
    网站时区,详情请见时区列表

    网址

    url: http://yoursite.com   网址
    root: /      网站根目录
    permalink: :year/:month/:day/:title/   文章的永久链接格式
    permalink_defaults:  永久链接中各部分的默认值
    

    如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

    目录

    Directory
    source_dir: source  资源文件夹,这个用来存放内容
    public_dir: public 公共文件夹,这个文件夹用于存放生成的站点文件
    tag_dir: tags 标签文件夹
    archive_dir: archives 归档文件架
    category_dir: categories 分类文件夹
    code_dir: downloads/code include code文件夹
    i18n_dir: :lang 国际化文件夹
    skip_render:跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
    

    public,tags,archives,categories文件夹在hexo项目中是不可见的,只有执行Hexo generate命令时,生成public静态文件的时候才存在
    我们可以看一下public文件夹的目录信息

    目录

    文章

    Writing
    新文章的文件名称
    new_post_name: :title.md  //File name of new posts
    预设布局
    default_layout: post
    把标题转换为 title case
    titlecase: false Transform title into titlecase
    在新标签中打开链接
    external_link: true Open external links in new tab
    把文件名称转换为 (1) 小写或 (2) 大写
    filename_case: 0
    显示草稿
    render_drafts: false
    启动 Asset 文件夹
    post_asset_folder: false
    把链接改为与根目录的相对位址
    relative_link: false
    显示未来的文章
    future: true
    代码块的位置
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace:
    

    分类标签

    Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:
    

    时间/日期格式

    Date / Time format
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss
    

    分页

    Pagination
    per_page: 10
    pagination_dir: page
    

    扩展

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

    一键部署

    Deployment
    deploy:
      type:
    

    Hexo基本指令

    • 新建文章:
      hexo new [layout] <title>
      注意:没有设置layout时候,默认使用 _config.yml 中的 default_layout 参数代替,如果标题包含空格,请用引号括起来

    • 生成静态文件:
      hexo generate,简写 hexo g

    • hexo g -d ,文件生成后立即部署网站

    • hexo g -w(--watch), 文件生成后件监视文件改动

    • 发表草稿
      hexo publish [layout] <filename>

    • 本地启动服务
      hexo s 默认4000端口

    • hexo s -p(--port) 8888 -s(--static) -l(--log)
      重设端口,启用静态文件,启动日记记录,使用覆盖记录格式

    • 部署网站
      hexo delpoy

    • 渲染文件
      heox render <file1> [file2] -o path path设置输出路径

    • 从其他博客系统迁移内容
      hexo migrate <type>

    • 清除缓存(一般主题改变后使用)
      hexo clean
      tips:清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

    • 列出网站资料
      hexo list <type>

    • 显示版本
      hexo version

    同步部署到Github Pages和Coding Pages

    Github Pages原理

    完成github部署,首先你得有一个github账号,关于git的使用可以参考廖雪峰的git教程,讲的很详细,算是入门的好教程了,更详细的请参考git官网

    在这里我默认大家已经有账号,并且完成了SSH KEY配置,这个SSH KEY的作用在,让你的git识别你的电脑,这样你才可以推送远程。

    好了废话不多说,我来讲述Github pages运行原理啦

    首先,还是老样子,Github Pages官网,这里可以了解Github pages是什么,我在这里说说我的见解吧

    //视频代码
    <div align=center>
    <p style="font-size:30px;color:green;">What is Github Pages?<p>
    <iframe width="853" height="480" src="https://www.youtube.com/embed/2MsN8gpT6jY" frameborder="0" allowfullscreen></iframe>
    </div> 
    

    以上视频说了什么是github pages,其实 github pages 是对一个静态资源的访问,相当于文件服务器,我们用 node 也可以做一个文件服务器,Hexo通过生成静态资源文件目录 public,把 public 目录下的内容推送到 git 远程的 gh-pages 分支,就完成了 github pages 的操作,之后我们可以通过 https://username.github.io/repos 来访问你的静态资源了,就是这么简单

    注意点:要想通过github pages来访问你的资源,有两种做法:

    • 新建一个仓库,把本地资源直接推送到远程仓库的gh-pages分支,此时你的站点就在https://username.github.io/repos,repos 子目录了
    • 新建一个仓库,仓库名为username.github.io,把本地资源直接推送东master分支,此时你的站点是在https://username.github.io/就是根目录了,但是你的资源在repos目录下,所以记得引用本地资源要这么写 href='/public/xxx.img'

    至于coding page跟github同样是采用git版本控制的,而且coding page操作简单,这里不说了,注意ssh key的配置,否则你是无法推送的

    购买域名

    购买域名,在这里没什么好说的了,只知道腾讯域名的.top 1年只要4元,挺实惠的。
    买了域名之后,我们要把 github 和我们的域名绑定在一起,进行双向绑定

    • 域名绑定Github
      买了域名之后,都会有域名解析服务,我们就把域名解析设置在你的https://username.github.io/repos网址就可以了,这样,当你访问xxxx.top的时候,就会解析到你的github地址上去。也就是说你买的域名可以用了哈。
    • github pages 绑定你的域名
      这个做法,原理很简单,只要在仓库的根目录添加一个文件,文件名为 CNAME ,文件内容就写你买的域名,这样就OK了。

    但是,注意了,因为你每次写完文章的时候,都要部署,所以建议把 CNAME 文件放在在 HEXO 的 source 文件夹内,这样,每次部署的时候,source根目录的文件就会放在public根目录下了,一样达到了目的

    大功告成了吗?哈哈,并没有,我们做到这一步,无论是访问xxx.top还是访问https://username.github.io/repos都会跳转到xxx.top,但是注意,服务器在国外 :blush:

    我们为什么要同时部署到两个地方呢?

    距离阻挡不了相思,还是得有备胎!

    部署两个地方,现在是没什么好处了,之前因为 Coding pages 的服务器在国内,那么国内的用户通过域名分流可以访问 Coding pages,而国外的用户,域名分流,可以访问到 Github pages,但是现在 Coding pages 的服务器在香港,这样一来,也没什么好处了,还有就是百度爬虫是爬取不到 github page 的资源的,但是可以爬取到 Coding page 的,所以,这样一来,我们的网站离百度收录进了一步,具体要让我们的网站被百度收录,还是需要专门去研究SEO了,这里不介绍了。

    下面介绍如何设置,还记得配置网站信息在那个文件吗?在_config.yml里面

    _config.yml

    这样我们就可以通过hexo d -g一键部署啦
    hexo g hexo d分成两步也可以

    参考资料

    1. Hexo官方网站 : https://hexo.io/
    2. Github pages  : https://pages.github.com/

    相关文章

      网友评论

          本文标题:用Hexo+Github+Coding搭建静态博客(一)

          本文链接:https://www.haomeiwen.com/subject/etoixxtx.html