自己搭建博客的经历

文章目录
  1. 1. 初始化hexo环境
  2. 2. Wikitten主题配置
  3. 3. 配置
    1. 3.0.1. 站点配置
  • 4. 遇到的问题
  • 5. 参考资料
  • 本文记录自己搭建博客的记录,前提是Node.js、Git安装完成。

    初始化hexo环境

    • 新建博客的文件夹
    1
    2
    ~/Desktop/jiangli2017 
    cd ~/Desktop/jianli2017
    • 初始化hexo
    1
    hexo init

    Wikitten主题配置

    本博客根据自己的喜好,选择的Wikitten主题,这个主题类似wiki,具有文章的目录结构。

    • 进入你的 hexo 站点文件夹,克隆 Wikitten 主题到 themes/ 路径下
    1
    2
    cd ~/Desktop/jiangli2017 
    git clone https://github.com/zthxxx/hexo-theme-Wikitten.git themes/Wikitten
    • 覆盖站点目录中一些默认页面模板
    1
    2
    cp -rf themes/Wikitten/_source/* source/
    cp -rf themes/Wikitten/_scaffolds/* scaffolds/
    • 重命名主题中的 _config.yml.example_config.yml,然后可以使用配置文件配置主题
    1
    2
    3
    cp -f themes/Wikitten/_config.yml.example themes/Wikitten/_config.yml
    # 编辑配置文件,定制你的配置项
    vim themes/Wikitten/_config.yml

    大部分的配置项都和 icarus 主题中的配置项一样,你可以首先去阅读一下 icraus 的文档

    • 需要安装的插件写在主题的 package.json 文件中

    这里列出了这些插件的功能作用:

    1
    2
    3
    4
    5
    hexo-autonofollow	    // 打开非本站链接时自动开启新标签页
    hexo-directory-category // 根据文章文件目录自动为文章添加分类
    hexo-generator-feed // 生成 RSS 源
    hexo-generator-json-content // 生成全站文章 json 内容,用于全文搜索
    hexo-generator-sitemap // 生成全站站点地图 sitemap

    你可以将这些插件合并到站点package.json 文件中通过 npm install 一次安装,

    或者在站点目录下,你可以通过以下命令安装他们:

    1
    $ npm i -S hexo-autonofollow hexo-directory-category hexo-generator-feed hexo-generator-json-content hexo-generator-sitemap

    配置

    站点配置

    下面是站点推荐配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    yaml
    # Hexo Configuration
    # URL
    permalink: wiki/:title/

    theme: Wikitten

    # Directory
    skip_render:
    - README.md
    - '_posts/**/embed_page/**'

    # Writing
    new_post_name: :title.md # File name of new posts

    ## Markdown
    ## https://github.com/hexojs/hexo-renderer-marked
    marked:
    gfm: true

    ## Plugins: https://hexo.io/plugins/
    ### JsonContent
    jsonContent:
    meta: false
    pages:
    title: true
    date: true
    path: true
    text: true
    posts:
    title: true
    date: true
    path: true
    text: true
    tags: true
    categories: true
    ignore:
    - 404.html

    ### Creat sitemap
    sitemap:
    path: sitemap.xml

    ### Adds nofollow attribute to all external links in your hexo blog posts automatically.
    nofollow:
    enable: true
    exclude:
    - <your site url domain> # eg: zthxxx.me

    # Deployment(发布git)
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git
    repo: https://github.com/jianli2017/jianli2017.github.io.git
    branch: master

    # 多级目录结构
    auto_dir_categorize:
    enable: true # options:true, false; default is true
    force: true # options:true, false; default is false

    多级目录结构可以需要安装插件:

    1
    npm install --save hexo-directory-category

    遇到的问题

    • 不能发布到git上面
    1
    2
    hexo d
    ERROR Deployer not found: git

    解决办法:hexo目录下安装:

    1
    npm install  --save hexo-deployer-git
    • hexo d 没有反应

    需要在站点目录下的_config.yml 中添加如下配置:

    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/jianli2017/jianli2017.github.io.git
    branch: master
    • 图床

    我的博客中用相对目录显示图片,无法显示,需要用图床,我选择的是七牛云

    参考资料