本次使用hexo+github搭建个人博客，使用Linux平台。
一.准备工作
1.了解Hexo
Hexo是高效的静态站点生成框架，基于Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容，而且相对于其他框架，Hexo在速度上也有很大优势。简而言之：hexo是个静态页面生成、上传的工具。
二.开始搭建博客
1.安装Node.js
$ sudo apt-get install node.js$ sudo apt-get install npm
说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以推荐淘宝的镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装cnpm，安装成功以后，将npm改成使用cnpm安装模块即可，简单，省事
2. 安装Hexo
$ cnpm install -g hexo-cli
3. 搭建博客
在根目录上建立一个文件夹
mkdir blog
在这个文件夹里
hexo init
此时hexo的安装已经完成
文件夹
尝试启动:
$ hexo s
在这里插入图片描述
打开浏览器输入:localhost:4000
生成的hexo
博客已经被生成,并默认创建一篇名为Hell World 的文章
4. 怎样新建博客
新建一篇博客
$ hexo n "一篇博客"
在/source/_posts下产生一件markdown文件
在这里插入图片描述
我们可以使用vscode进行编辑：
在这里插入图片描述
在blog文件夹下：
- 生成：
hexo g - 运行
hexo s
运行浏览器查看:
在这里插入图片描述
三.将博客部署到github
1. 创建仓库
新建一个名 ==你的用户名.github.io== 的仓库，（必须是你的用户名，其它名称无效）。
比如说，如果你的github用户名是handsomeguy，那么你就新建<font color='red'> handsomeguy.github.io</font>的仓库
在这里插入图片描述
2. 配置git环境
在文件夹下命令配置git
cnpm install --save hexo-deployer-git
可以使用gedit打开_config.yml文件
gedit _config.yml
在这里插入图片描述
设置为：
在这里插入图片描述
repo后的内容填入创建仓库的名字，冒号后一定要加<font color='red'> 一个空格</font>
部署到github
hexo d
期间要输入用户名和密码
然后就可以通过 https://handsomeguy.github.io 访问了
三.更换主题
由于原生的主题不美观、追求自由的我当然选择更换主题啦
这里我选择icarus主题
直接下载主题模块放到blog项目 ,blog项目根目录执行
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
稍等片刻以后在\theme 文件夹中就存在主题了
在这里插入图片描述
_我的顶级config.yml的配置:
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: **的博客
subtitle:
description: 一个普通的博客
keywords:
author: **
language: zh-CN #设置语言为中文
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: icarus #设置主题
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/***********/**********.github.io.git
branch: master
yaml 语言比较严谨,注意格式问题。
在themes/icarus 也有一个_config.yml 这是博客的主题配置
_我的主题config.yml的配置:
# Version of the Icarus theme that is currently used
version: 2.3.0
# Path or URL to the website's icon
favicon: /images/favicon.svg
# Additional HTML meta tags in an array.
meta:
# Path or URL to RSS atom.xml
rss:
# Path or URL to the website's logo to be shown on the left of the navigation bar or footer
logo: /images/logo.png
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
# Facebook App ID
fb_app_id:
# Facebook Admin ID
fb_admins:
# Twitter ID
twitter_id:
# Twitter site
twitter_site:
# Google+ profile link
google_plus:
# Navigation bar link settings
navbar:
#菜单（显示名称：对应文件夹）
menu:
主页: /
归档: /archives
分类: /categories
标签: /tags
关于: /about
# Navigation bar links to be shown on the right
#links:
#Download on GitHub:
#icon: fab fa-github
#url: 'https://github.com/ppoffice/hexo-theme-icarus'
# Footer section link settings
footer:
# Links to be shown on the right of the footer section
links:
Creative Commons:
icon: fab fa-creative-commons
url: 'https://creativecommons.org/'
Attribution 4.0 International:
icon: fab fa-creative-commons-by
url: 'https://creativecommons.org/licenses/by/4.0/'
Download on GitHub:
icon: fab fa-github
url: 'https://github.com/'
# Article display settings
article:
# Code highlight theme
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
highlight: atom-one-light
# Whether to show article thumbnail images
thumbnail: true #必须设置，于主题右侧图片有关
# Whether to show estimate article reading time
readtime: true
# Search plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
# Name of the search plugin
type: insight
# Comment plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
# Name of the comment plugin
type:
# Donation entries
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
#comment:
#gitment:
# owner: zhouchuang1998 # 你的github的用户ID
# repo: blog-comment #在github中需要新创建一个仓库用来存放评论，这里填写仓库名
# client_id: fc880649f4681069c1de #你的ClientID
# client_secret: 3f0cdf9413fff933a1fa08c1435b425b2347069d #你的SecureID
# admin: zhouchuang1998 # 管理员的名字
donate:
-
# Donation entry name
type: alipay
# Qrcode image URL
qrcode: '/images/zhifubao.JPG'
-
# Donation entry name
type: wechat
# Qrcode image URL
qrcode: '/images/wechat.JPG'
-
# Donation entry name
# type: paypal
# Paypal business ID or email address
# business: ''
# Currency code
# currency_code: USD
-
# Donation entry name
# type: patreon
# URL to the Patreon page
# url: ''
# Share plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
# Share plugin name
type:
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
# left sidebar settings
left:
# Whether the left sidebar is sticky when page scrolls
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# right sidebar settings
right:
# Whether the right sidebar is sticky when page scrolls
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# Sidebar widget settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
-
# Widget name
type: profile
# Where should the widget be placed, left or right
position: left
# Author name to be shown in the profile widget
author:
# Title of the author to be shown in the profile widget
author_title: Student
# Author's current location to be shown in the profile widget
location: Shenyang, China
# Path or URL to the avatar to be shown in the profile widget
avatar: 'images/avatar.jpg'
# Email address for the Gravatar to be shown in the profile widget
gravatar:
# Whether to show avatar image rounded or square
avatar_rounded: false
# Path or URL for the follow button
follow_link: 'https://github.com/'
# Links to be shown on the bottom of the profile widget
social_links:
Github:
icon: fab fa-github
url: 'https://github.com'
Facebook:
icon: fab fa-facebook
url: 'https://facebook.com'
Twitter:
icon: fab fa-twitter
url: 'https://twitter.com/'
Dribbble:
icon: fab fa-dribbble
url: 'https://dribbble.com'
RSS:
icon: fas fa-rss
url: /atom.xml
-
# Widget name
type: toc
# Where should the widget be placed, left or right
position: left
-
# Widget name
type: links
# Where should the widget be placed, left or right
position: left
# Links to be shown in the links widget
links:
简书: 'https://www.jianshu.com'
豆瓣: 'https://www.douban.com'
-
# Widget name
type: category
# Where should the widget be placed, left or right
position: left
-
# Widget name
type: tagcloud
# Where should the widget be placed, left or right
position: left
-
# Widget name
type: recent_posts
# Where should the widget be placed, left or right
position: right
-
# Widget name
type: archive
# Where should the widget be placed, left or right
position: right
-
# Widget name
type: tag
# Where should the widget be placed, left or right
position: right
# Other plugin settings
plugins:
# Enable page animations
animejs: true
# Enable the lightGallery and Justified Gallery plugins
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
gallery: true
# Enable the Outdated Browser plugin
# http://outdatedbrowser.com/
outdated-browser: true
# Enable the MathJax plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
mathjax: true
# Show the back to top button on mobile devices
back-to-top: true
# Google Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
google-analytics:
# Google Analytics tracking id
tracking_id:
# Baidu Analytics plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
baidu-analytics:
# Baidu Analytics tracking id
tracking_id:
# Hotjar user feedback plugin
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
hotjar:
# Hotjar site id
site_id:
# Show a loading progress bar at top of the page
progressbar: true
# Show the copy button in the highlighted code area
clipboard: true
# BuSuanZi site/page view counter
# https://busuanzi.ibruce.info
busuanzi: false
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
# Name or URL of the JavaScript and/or stylesheet CDN provider
cdn: jsdelivr
# Name or URL of the webfont CDN provider
fontcdn: google
# Name or URL of the webfont Icon CDN provider
iconcdn: fontawesome
英文水平不行可以通过翻译理解。
配置md模板
在 /blog/scaffolds/post.md 中
---
title: {{ title }}
date: {{ date }}
tags:
categories:
thumbnail:
---
<meta name="referrer" content="no-referrer" />
<!--more-->
thumbnail：后加图片的地址、<meta name="referrer" content="no-referrer" /> 防止引用的网络图片不显示，``保证在主页只显示一部分内容。
更多配置请参考官网配置或其他博客，这里仅展示最基本的配置。
四.最终效果
在这里插入图片描述
参考文献：
http://blog.kimzing.com/2018/08/30/blog/Hexo%E4%B9%8Bicarus%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE/
https://hexo.io/zh-cn/docs/
https://www.cnblogs.com/andfly/p/6681487.html
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
网友评论