Hexo搭建个人博客:入门

Hexo搭建个人博客:入门


使用基于Nodejs的Hexo博客框架, 结合github.io页面, 快速搭建个人博客并发布

0 先决条件

1 工具准备

1 GITHUB仓库创建

​ 创建新repository,名为username.github.io(username与github用户名一致)

2 安装相关工具

  1. 安装node管理工具nvm

    1
    2
    3
    4
    5
    # 使用brew安装
    brew install nvm
    # 添加进终端配置文件(.zshrc或.bash_profile)
    export NVM_DIR=~/.nvm
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

    此处有个坑: nvm官方并不建议使用brew安装

    Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below, before filing an issue.

    如果使用Homebrew安装,因为安装路径等原因, 在.nvm中会缺少nvm-exec和nvm.sh两个文件。导致每次启动终端都需要输入source $(brew --prefix nvm)/nvm.sh才能使当前终端使用nvm命令

    解决方法有2

    1. 简单粗暴:在.zshrc(终端配置文件)中加入source $(brew --prefix nvm)/nvm.sh

    2. 曲线救国:(注意此方法curl命令可能被墙, 具体见nvm项目github)

      1. 卸载使用brew安装的nvmbrew uninstall nvm

      2. 使用curl命令下载

        1
        curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.2/install.sh | bash
      3. 终端配置文件加入

        1
        2
        3
        export NVM_DIR="$HOME/.nvm"
        [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
        [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
  2. 安装nodejs

    1
    nvm install stable

    网上很多过期教程会建议使用 nvm install 4 , nvm install 6 , 实际安装后, node版本在7以下的都会抛出异常, 建议一步到位安装最新稳定版node

    nvm/npm常用命令:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 切换nvm版本至 <number>开头的默认版本
    nvm use <number>
    #设置默认 node 版本为 0.12.7
    nvm alias default 0.12.7
    # 使用.nvmrc文件配置项目所使用的node版本
    cd <项目根目录> #进入项目根目录
    echo <number> > .nvmrc #添加 .nvmrc 文件
    nvm use #无需指定版本号,会自动使用 .nvmrc 文件中配置的版本
    node -v #查看 node 是否切换为对应版本
    #安装 <module-name> 模块至全局目录,安装完成的路径是 /Users/<username>/.nvm/versions/node/<nvm-version>/lib/<module-name>
    npm install -g <module-name>

    nvm与n的区别

    • node 版本管理工具还有一个是 TJ 大神的 n 命令,n 命令是作为一个 node 的模块而存在,而 nvm 是一个独立于 node/npm 的外部 shell 脚本,因此 n 命令相比 nvm 更加局限。
    • 由于 npm 安装的模块路径均为 /usr/local/lib/node_modules ,当使用 n 切换不同的 node 版本时,实际上会共用全局的 node/npm 目录。 因此不能很好的满足『按不同 node 版本使用不同全局 node 模块』的需求。
  3. 安装Hexo

    1
    sudo npm install hexo-cli -g

2 hexo的使用入门

  1. 创建博客和基础配置

    1
    2
    hexo init username.github.io # 博客根目录<folder_name>
    cd username.github.io

    更改博客根目录下的_config.yml文件

    1
    2
    3
    4
    5
    6
    7
    title:
    author:
    language: zh-Hans #中文
    theme: landscape
    deploy:
    type: git
    repo: https://github.com/username/username.github.io.git
  2. 更换主题

    主题测评见文章hexo的主题比较

    hexo初始化中自带landscape主题

    1
    2
    # 此处以next主题为例
    git clone https://github.com/iissnan/hexo-theme-next themes/next

    进入themes/next, 打开_config.yml, 按照文件中的说明即可对主题进行基础配置

    同时更改博客根目录中_config.yml文件的theme: next

  3. 写文章

    博客根目录username.github.io下的source文件夹保存所有博客, 默认使用md语法

    hexo写作命令

    1
    hexo new [layout] <title>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title: Hexo博客搭建入门
    date: 2020-02-16
    tags: hexo js
    categories:
    - Code
    - Guide
    keywords: hexo js 前端 博客
    ---

    Hello World!
  4. 测试hexo s

  5. 安装使用hexo-deployer-git](https://link.jianshu.com/?t=https://github.com/hexojs/hexo-deployer-git)自动部署发布工具

    1
    2
    npm install hexo-deployer-git --save
    hexo clean && hexo g && hexo d

hexo的使用进阶

基本命令

  • hexo init:新建一个网站

  • hexo new [layout] --option <titile> :新建一个layout的文章,如果标题有空格,使用引号括起来

    • -p 自定义新文章的路径
    • -r 替换同名文章
    • -s 作为新文章的文件名和发布后的url
  • hexo generate生成静态文件(只生成有改动的文件)

    • -d生成后立刻部署
    • -w 监视文件变动
    • -b 抛出生成过程中的异常
    • -f 强制重新生成全部文件
    • -c 最大同时生成文件的数量
  • hexo publish [layout] <filename> 发表草稿

  • hexo server 打开本地服务器

  • hexo deploy 部署

  • hexo render <file1> [file2] 渲染文件

    • -o设置输出路径

写作

  • layout:post/page/draft

    如果你不想你的文章被处理,你可以将 Front-Matter 中的layout: 设为 false

  • title:在_config.yaml中编辑参数改变默认名称

  • scaffold:根须scaffold文件夹内对应的文件来建立文件

Font-matter

  • layout:布局

  • title:标题/文件名

  • date:建立日期

  • update:更新日期

  • comments:开启文章的评论功能

  • tags:标签

  • categories:分类

    • 如果需要为文章添加多个分类

      1
      2
      3
      4
      categories:
      - [Diary, PlayStation]
      - [Diary, Games]
      - [Life]
  • permalink:覆盖网址

  • keywords:仅用于meta标签和Open Graph的关键词

标签插件

并不建议过多使用这些标签,这些标签是hexo的私有语法,迁移是会有不便,建议还是多使用md语法

hexo官网关于个别标签的演示并不完整,icarus主题的文档中有不同插件使用的Demo

  • 引用块(quote) 等同md语法的<

    1
    2
    3
    {% blockquote [author[, source]] [link] [source_link_title] %}
    content
    {% endblockquote %}
  • 代码块(code) 等同md语法的```

    1
    2
    3
    {% codeblock [title] [lang:language] [url] [link text] [additional options] %}
    code snippet
    {% endcodeblock %}
    • line_number:flase
    • highlight:true
    • first_line:13 行号从第几开始
    • ​ 下划线特定行,即第1行和4到7行
    • wrap:true
  • Pull Quote

    1
    2
    3
    {% pullquote [class] %}
    content
    {% endpullquote %}
  • jsFiddle

    1
    {% jsfiddle shorttag [tabs] [skin] [width] [height] %}
  • Gist(一般短代码直接插入markdown,长代码才用gist)

    1
    {% gist gist_id [filename] %}
  • iframe

    1
    {% iframe url [width] [height] %}
  • Image

    1
    {% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}
  • Link

    1
    {% link text url [external] [title] %}
  • Include

    1
    {% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
  • Youtube/Vimeo

    1
    2
    {% youtube video_id %}
    {% vimeo video_id %}
  • 引用文章(我一般是当做直接引用链接fffff)

    1
    2
    {% post_path filename %}
    {% post_link filename [title] [escape] %}
  • 引用文章的资源(关于资源文件夹的设置见本文图片部分

    1
    2
    3
    {% asset_path filename %}
    {% asset_img filename [title] %}
    {% asset_link filename [title] [escape] %}
  • Raw 插入Swig标签

    1
    2
    3
    {% raw %}
    content
    {% endraw %}
  • 文章摘要:在<!--more--> 之前的文字

    可能会被Font Matter中的excerpt部分覆盖(需要插件支持)

图片

  1. 资源文件夹 : 最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

  2. 组织化资源管理方式 : 通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开, 当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们

    1
    ![图片名称](图片名称.jpg)

    需要注意, 使用md时,在首页显示会出现错误, 使用标签插件可以解决

    1
    {% asset_img 图片名称.jpg This is an example image %}

    tips

    1. 在typora的设置中进行以下修改可以与hexo同步:

      typoraimg_setting

    2. 组织化资源管理的两种方式都会使图片失去本地编辑器上的可读性

    3. 实际使用中会遇到部分主题对标签插件渲染出现莫名其妙的错误(vexo),或者主题不支持(terminal),所以除非需要在首页的展示缩略图,建议使用markdown语法的方式。

文件命名规范

https://adoyle.me/Today-I-Learned/others/file-naming-with-underscores-and-dashes.html

title:Hexo搭建个人博客:入门

author:Anne416wu

link:https://www.annewqx.top/posts/2727/

publish time:2020-02-22

update time:2022-04-22


评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×