博客

基于 Hexo 搭建个人博客

官网：https://hexo.io/zh-cn/

  • 一、前置条件：注册、配置 Github

    • 1、注册
    • 2、创建名为 xxx.github.io 的仓库，xxx 是你的用户名
    • 3、配置 SSH-Key
      • 创建 SSH-Key，ssh-keygen -t rsa -C "xxx@xxx.com"，xxx@xxx.com 是你的邮箱
      • 查看 id_rsa.pub，cat ~/.ssh/id_rsa.pub，复制
      • Settings - SSH and GPG keys - New SSH key，填写 Title，粘贴 Key

  • 二、安装依赖：Node、Hexo

    • 1、安装 Node
      • brew install node
    • 2、安装 Hexo
      • npm install hexo-cli -g

  • 三、配置博客：编写、部署

    • 1、初始化 hexo init xxx，````xxx`` 是你的文件名
    • 2、进入道你的文件夹下 cd xxx，安装依赖 npm install
    • 3、生成静态页面 hexo generate
    • 4、预览 hexo server
    • 5、编写博客 hexo new 'xxx'，xxx 是你的文章名

      • PS：推荐 MacDown https://macdown.uranusjr.com/

      • 编辑 xxx/source/_posts/xxx.md 文件

        1
        2
        3
        4
        5
        6
        7
        8
        9
        title: "Hello Blog"
        date: 2021-03-05 12:30:00
        categories:
        - 记事本
        tags:
        - 日记
        ---

        其他内容...
    • 6、新建页面 hexo new page 'about'，然后编辑 source/about/index.md 文件
    • 7、主题配置

      • 当前最新版本 hexo 中，默认主题 themes/landscape 未配置，需手动下载

      • 克隆主题仓库 git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape

      • 复制 landscape 到 xxx/themes 中

      • 编辑 xxx/themes/landscape/_config.yml 文件，修改 menu 配置

        1
        2
        3
        4
        menu:
          首页: /
          归档: /archives
          关于: /about

      • 若页面加载过慢，可将 xxx/themes/landscape/layout/_partial/head.ejs 文件中 <%- css('https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css') %> 注释

    • 8、部署

      • 编辑 xxx/_config.yml 文件，repository 填写你仓库的 SSH 地址

        1
        2
        3
        4
        deploy:
          type: 'git'
          repository: git@github.com:xxx/xxx.github.io.git
          branch: master

      • 执行 npm install hexo-deployer-git --save

      • 执行 hexo deploy，部署完成后，即可通过 xxx.github.io 访问

  • 四、相关命令

    • 1、常用命令

      1
      2
      3
      4
      5
      6
      7
      hexo new 'postName'       #新建文章
      hexo new page 'pageName'  #新建页面
      hexo generate             #生成静态页面至public目录
      hexo server               #开启预览访问端口（默认端口4000，'ctrl + c'关闭 server ）
      hexo deploy               #将.deploy 目录部署到 GitHubhexo 
      hexo help                 #查看帮助
      hexo version              #查看 Hexo 的版本

    • 2、复合命令

      1
      2
      hexo deploy -g  #生成加部署
      hexo server -g  #生成加预览

    • 3、简写

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