搭建个人博客

发表于 更新于 分类于 阅读次数：
本文字数： 3.1k

采用Hexo+Next搭建个人博客，并通过Github Pages部署。

官方手册

配置环境

  • 安装Node.js，使用npm -v查看版本

  • 安装Git，使用git --version查看版本

  • 修改npm源

# 获取npm源
npm get registry
# 修改为淘宝源
npm config set registry http://registry.npm.taobao.org/
# 重置
# npm config set registry https://registry.npmjs.org/
  • 安装Hexo
npm install -g hexo-cli

部署网站

  • 初始化文件夹
hexo init <folder>
cd <folder>
npm install
  • 至此网站已经初步搭建完成，通过如下命令本地查看。
# generate and start
hexo g && hexo s
# open http://localhost:4000

  • 部署到Github

    • 首先申请一个Github账号，并上传SSH Key，可百度或参考教程。
    • 新建仓库，名为username.github.io。
    • 安装插件
    npm install hexo-deployer-git --save
    • 修改配置文件_config.yml
    deploy:
type: git
repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch]
message: [message]
    • 部署网站
    hexo clean && hexo g && hexo d

修改配置

  • 修改基本信息
# blog/_config.yml
title: entropy2333
subtitle: ''
description: ''
keywords:
author: entropy2333
language: zh-CN
timezone: ''

  • 修改主题

    • 下载主题
    git clone https://github.com/theme-next/hexo-theme-next.git themes/next
    • 修改配置文件
    # blog/_config.yml
theme: next

  • 关闭广告

# blog/themes/next/_config.yaml
powered: false

  • 修改菜单栏

    • 添加菜单
    # blog/themes/next/_config.yaml
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
#categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat
    • 生成文件
    # 生成的文件位于hexo/source下
hexo new page "about"

  • 修改Next风格

    # blog/themes/next/_config.yaml
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

  • 修改头像

    # blog/themes/next/_config.yaml
avatar:
# Replace the default image and set the url here.
# url: #/images/avatar.gif
url: /images/myavatar.jpg
# If true, the avatar will be dispalyed in circle.
rounded: false
# If true, the avatar will be rotated with the cursor.
rotated: false

  • 添加RSS订阅，需要安装插件npm install hexo-generator-feed --save

# blog/_config.yaml 添加如下内容
feed:
  enable: true
  type: atom
  path: atom.xml
  order_by: -date
  icon: icon.png
  autodiscovery: true

# blog/themes/next/_config.yaml
social:
  RSS: /atom.xml || fa fa-rss
  • 修改代码块样式
# blog/_config.yaml
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: false
  line_threshold: 0
  tab_replace: ''
 
# blog/themes/next/_config.yaml
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    enable: false
    light: atom-one-light
    dark: atom-one-dark
  prism:
    enable: true
    light: prism-one-dark
    dark: prism-one-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    show_result: true
    # Available values: default | flat | mac
    style: flat
---
title: {{ title }}
date: {{ date }}
tags:
category:
- Paper
---

Abstract

<!--more-->



## Overview


links of paper pdf & code


## Background


## Method

## Experiment

:hexoPostRenderEscape-->

  • 表格模块
{% tabs renderer %}
<!-- tab pandoc + MathJax -->
pandoc + MathJax
<!-- endtab -->

<!-- tab markdown-it -->
markdown-it
<!-- endtab -->
{% endtabs %}

pandoc + MathJax

markdown-it

总结

个性化设置基本都是基于修改配置文件，修改完用hexo clean; hexo g; hexo s本地查看是否生效。

参考文章