• 通过 hexo 生成静态博客


    通过 hexo 生成静态博客

    背景

    在对比了很多博客网站以后,我决定开始慢慢迁移我的文章,以后有时间的话还会搭建自己的网站,目前主流的静态博客生成器有三个: jekyll, hexo, hugo.

    静态博客生成器是一种将 文档(主流是markdown 格式)生成静态网站页面文件的工具;当我们再将生成的结果放到page服务上,就可以变为静态博客。

    接下来我们就围绕 hexo 和博客搭建来展开,如果你具有前端编程能力我推荐你一开始就是用 hugo 来搭建自己的博客,如果你不熟悉前端知识建议你使用 hexo 实现,因为 hexo 的优势就是有很多现成的插件, 而且可选的主题样式比较多。唯一的缺点就是生成的速度可能会比较慢,但半个小时内的速度对于我本人是可以接受的。

    host平台   :Ubuntu 16.04

    步骤

    我们使用 Hexo 只需要如下几个步骤就可以实现一个最基本的网站,甚至都不需要自定义。接下来先从大概搭建步骤上简要说明过程:

    安装 Hexo

    Hexo 安装的前提条件 安装 Node.js 和 npm 环境:

    npm install -g hexo-cli
    npm install -g hexo-server
    

    如果遇到nodejs版本太低会遇到下面的问题:

    $ hexo -version
    /usr/local/lib/node_modules/hexo-cli/lib/hexo.js:15
    function entry(cwd = process.cwd(), args) {
                       ^
    
    SyntaxError: Unexpected token =
        at exports.runInThisContext (vm.js:53:16)
        at Module._compile (module.js:374:25)
        at Object.Module._extensions..js (module.js:417:10)
        at Module.load (module.js:344:32)
        at Function.Module._load (module.js:301:12)
        at Module.require (module.js:354:17)
        at require (internal/module.js:12:17)
        at Object.<anonymous> (/usr/local/lib/node_modules/hexo-cli/bin/hexo:5:1)
        at Module._compile (module.js:410:26)
        at Object.Module._extensions..js (module.js:417:10)
    
    
    $ nodejs --version
    v4.2.6
    
    

    部署

    安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

    $ hexo init <folder>
    $ cd <folder>
    $ npm install
    

    新建完成后,指定文件夹的目录如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    

    _config.yml

    网站的 配置 信息,您可以在此配置大部分的参数。

    package.json

    应用程序的信息。EJS, StylusMarkdown renderer 已默认安装,您可以自由移除。

    package.json
    
    {
      "name": "hexo-site",
      "version": "0.0.0",
      "private": true,
      "hexo": {
        "version": ""
      },
      "dependencies": {
        "hexo": "^3.8.0",
        "hexo-generator-archive": "^0.1.5",
        "hexo-generator-category": "^0.1.3",
        "hexo-generator-index": "^0.2.1",
        "hexo-generator-tag": "^0.2.0",
        "hexo-renderer-ejs": "^0.3.1",
        "hexo-renderer-stylus": "^0.3.3",
        "hexo-renderer-marked": "^0.3.2",
        "hexo-server": "^0.3.3"
      }
    }
    

    scaffolds

    模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

    Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

    source

    资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

    themes

    主题 文件夹。Hexo 会根据主题来生成静态页面

    创建文章

    创建一篇新的文章

    hexo new "my-first-post"
    

    生成静态文件

    使用以下命令,成功以后在public目录看到生成的静态文件内容,只需要将该内容同步到服务器即可。

    hexo g
    

    测试

    为了方便测试,hexo提供了本地服务,在当前目录下使用以下命令

    hexo server
    

    然后在 浏览器中打开http://localhost:4000,即可看到效果

    安装新的主题

    hexo | them 可以选择自己喜欢的主题。这里以“NexT”为例。

    下载

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

    下载以后,放到 theme文件夹,改名为next

    修改配置

    修改_config.yml,将theme改为 next

    重新生成

    hexo clean && hexo d -g
    

    添加新的页面

    修改_config.yml,添加

    # ---------------------------------------------------------------
    # Menu Settings
    # ---------------------------------------------------------------
     
    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
    # Usage: `Key: /link/ || icon`
    # Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
    # Value before `||` delimiter is the target link.
    # Value after `||` delimiter is the name of FontAwesome icon. If icon (with or without delimiter) is not specified, question icon will be loaded.
    # External url should start with http:// or https://
    menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    

    输入以下命令:

    hexo new page "about" &&
    hexo new page "tags" && 
    hexo new page "categories"
    

    打开各页面对应的index.md文件,编辑如下内容,title和date是默认生成的,增加type即可:

    type: "about"type: "tags"type: "categories"

    重新部署

    hexo clean && hexo d -g
    

    测试

    hexo server
    
  • 相关阅读:
    权限设计=功能权限+数据权限
    C# 自定义配置文件
    asp.net core 系列 2 启动类 Startup.CS
    asp.net core 系列 1 概述
    IOC : Unity 配置和使用
    Unity Ioc 依赖倒置及Untity AOP被动拦截/自动拦截
    webuploader-异步切片上传(暂不支持断点续传)及 下载方法!C#/.NET
    C# 构造基础返回值类型-BaseResponse
    神奇的选择器 :focus-within
    妙用 scale 与 transfrom-origin,精准控制动画方向
  • 原文地址:https://www.cnblogs.com/schips/p/12598577.html
Copyright © 2020-2023  润新知