0%

搭建个人博客

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

配置环境

  • 安装Node.js
1
npm -v
  • 安装Git
1
git --version
  • 修改npm源
1
2
3
4
5
6
# 获取npm源
npm get registry
# 修改为淘宝源
npm config set registry http://registry.npm.taobao.org/
# 重置
# npm config set registry https://registry.npmjs.org/
  • 安装Hexo
1
npm install -g hexo-cli

部署网站

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

    • 首先申请一个Github账号,并上传SSH Key,可百度或参考教程
    • 新建仓库,名为username.github.io。
    • 安装插件
    1
    npm install hexo-developer-git --save
    • 修改配置文件_config.yml
    1
    2
    3
    4
    deploy:
    type: git
    repo: git@github.com:entropy2333/entropy2333.github.io.git
    branch: master
    • 部署网站
    1
    hexo clean && hexo g && hexo d

修改配置

  • 修改基本信息
1
2
3
4
5
6
7
8
# blog/_config.yml
title: entropy2333
subtitle: ''
description: ''
keywords:
author: entropy2333
language: zh-CN
timezone: ''
  • 修改主题

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

1
2
# blog/themes/next/_config.yaml
powered: false
  • 修改菜单栏

    • 添加菜单
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 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
    • 生成文件
    1
    2
    # 生成的文件位于hexo/source下
    hexo new page "about"
  • 修改Next风格

    1
    2
    3
    4
    5
    # blog/themes/next/_config.yaml
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    #scheme: Gemini
  • 修改头像

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 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

总结

更多的个性化设置基本都是基于修改配置文件,修改完用hexo g && hexo s本地查看是否生效,可查看参考文章或百度。

参考文章

Hexo博客+Next主题深度优化与定制

Hexo+NexT搭建个人博客

Cannot read property ‘enable_sync’ of undefined