使用hexo+github搭建个人博客

2019-07-10 本文已影响0人周闖

本次使用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

使用hexo+github搭建个人博客

一.准备工作

1.了解Hexo

二.开始搭建博客

1.安装Node.js

2. 安装Hexo

3. 搭建博客

4. 怎样新建博客

三.将博客部署到github

1. 创建仓库

2. 配置git环境

三.更换主题

四.最终效果

猜你喜欢

热点阅读