搭建一个属于自己的博客网站，应该是每个程序员都想要实现的吧！但是搭建个人博客，需要处理域名等一系列问题，通过Github Pages就可以进行轻松实现个人博客发静态网站了，还可以自定义自己喜欢的风格，记录自己的学习路程和心得。实现方式一种是GitHub Pages + Hexo ，另外一种是GitHub Pages + jekyll ，我这仅介绍github+hexo方式！
Node.js Hexo Github Pages
1.node.js安装
- 下载地址
https://nodejs.org/en/download/
- 测试
# 安装成功测试cmd
node -v
npm -v
2.hexo安装与配置
# cmd切换到blog文件夹下，输入安装hexo命令
npm install hexo -g
# 安装成功测试
hexo -v
# hexo初始化
hexo init
# 安装必要的组件
npm isntall
# 开启服务器
hexo g
# 显示本地博客地址，复制位置到浏览器打开后显示
hexo s
# 如果无法显示网页,说明端口可能被占用,更改端口便可
hexo server -p 4001
3.git安装
- 下载地址
- 配置
# 生成rsa命令
cd ~/.ssh
ssh-keygen -t rsa -C "[email protected]"
# 添加密钥到ssh-agent
eval "$(ssh-agent -s)"
# 添加生成的SSH key到ssh-agent
ssh-add ~/.ssh/id_rsa
# 将id_rsa.pub文件里的内容复制到add SSH keys
# 测试是否成功
ssh -T [email protected]
再blog文件夹中找到_config.yml文件，修改repo值(末尾)
deploy:
type: git
repo: [email protected]:test/test.github.io.git
branch: master
4.创建新博客
- 流程
# 创建博客
hexo new "blog name"
# 博客生成
hexo g
# 博客部署
hexo d
# 博客生成+部署
hexo d -g
- 博客编辑器typora
- 博客图片上传问题
# 修改_config.yml里的psot_asset_folder:设置为true
# cmd执行
npm install hexo-asset-image --save
(或npm install https://github.com/CodeFalling/hexo-asset-image --save)
# 使用hexo new "blog name"新建博客时，_posts目录下会出现同名*.md和文件夹，图片放在此文件夹中
5.博客个性化设置
下载hexo主题（自选主题模板）
下载next主题
git clone https://github.com/iissnan/hexo-theme-next themes/next
修改./blog/_config.yml
- 主题选择
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
- 网页信息
# Site
title: Just_Paranoid
subtitle: 特立独行
description: ''
keywords: ''
author: fangjian98
language: zh-CN
timezone: ''
修改./blog/themes/next/_config.yml
- 选择主题样式
Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 左侧网站信息及目录，块+片段结构布局
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
- 网站图标
# ---------------------------------------------------------------
# Site Information Settings
# See: https://theme-next.org/docs/getting-started/
# ---------------------------------------------------------------
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
- 主页显示摘要
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true
# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true
在文章中添加该标志，本文在首页的预览就会显示到这个段落为止。
<!-- more -->
- 头像
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: #/images/avatar.gif
# If true, the avatar will be dispalyed in circle.
rounded: false
# If true, the avatar will be rotated with the cursor.
rotated: false
- 社交链接
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
#GitHub: https://github.com/yourname || fab fa-github
#E-Mail: mailto:[email protected] || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
- 创建菜单
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false
- 修改完主题后需要重新部署
hexo clean
hexo d -g