个人博客创建(Hexo+Github Pages+Next)

96
豆沙包o小白
2016.09.05 16:45* 字数 1268

个人博客创建

  • Hexo:静态博客框架
  • GitHub Pages:绑定自定义域名存放静态页面

所需环境

Node.js
Git
Hexo(npm install hexo-cli -g)

开始创建

创建Github仓库

  • 进入github并登录

  • 创建仓库New repository


    image
  • 填写仓库名称 注意 Respository name 中一定要输入:你的用户名.github.io,然后点击”Create repository“ 按钮完成创建即可。我尝试过在这填写过:不是用户名.github.io,最终的后果是显示404页面。


    image

本地环境准备

打开终端输入:npm install hexo-cli -g
若为mac,则输入:sudo npm install hexo-cli -g

初始化本地博客仓库

  • 先进入存储博客的目录:cd F://Juvo/my/
  • 初始化博客仓库
hexo init 你的用户名.github.io
  • 预览博客效果:hero s(hero server)


    image
  • 在浏览器上输入网址:http://localhost:4000/,就能预览到landscape主题下的博客效果
    image

Next主题安装

  • 开始安装主题之前,可以打开xxx.github.io文件,将此文件夹中的themes移除掉,当然你可以在安装过程中直接替换掉;
  • 安装:在终端定位到xxx.github.io目录下,执行下面的命令后,稍等片刻,主题就下载到对应的位置;
cd xxx.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next
image

站点配置

基本配置
  • 站点配置文件:打开之前的xxx.github.io文件夹,找到_config.yml即为站点配置文件,选中该文件->右击->打开方式->文本编辑(也可以选择Sublime打开),打开后就可以修改基本的博客配置了;(注意一下:在配置文件里‘#’就是注释符,相当于C语言中的‘//’)
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 最晚的开始   #站点名称
subtitle: 所有的为时已晚都是开始的最好时候  #副标题
#个人描述
description: My goal is not write code.if we could ship products and make all this money without writing any code,we could.Your job is ship products EXACTLY on time.It doesn’t matter whether you are a developer,tester,program manager,product manager whatever.Everybody’s job is the same. 
author: JuvoS  #作者
language: zh-Hans  #语言
timezone:

# URL   
#绑定域名后,要创建 sitemap.xml 时再配置该项 
## 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:

# 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: next
 # theme: landscape

# 头像, 在xxx.github.io/source 下相对路径,若source文件夹下没有uploads,就新建一个名为uploads文件夹,具体见下面截图
avatar: /uploads/images/avatar.png

# Deployment
#这里是部署到Github上的设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git  #git提交
repo: https://github.com/LJuvo/LJuvo.github.io.git  #已创建的Github仓库
branch: master #提交到的分支
  • 重点配置


    image
  • 头像设置位置
sds.png
  • 配置好站点配置文件,就可以预览一下博客的效果了,流程与前面的相同,即在终端定位到xxx.github.io文件夹,执行hexo s命令。

博客的Next主题配置

  • 主题配置文件:需要与之前讲过的站点配置文件进行区分,站点配置文件在xxx.github.io/_config.yml目录;主题配置文件在xxx.github.io/themes/next/_config.yml目录下;
  • 关于主题可配置的选项略多,故采取分条讲解的形式
    1. 设置关键字
# Set default keywords (Use a comma to separate)
keywords: “iOS, 程序猿, 文艺小青年”     #修改

2. 设置博客的开始时间

# Specify the date when the site was setup
#since: 2016   #设置博客的开始时间

3. 菜单栏的设置

# ------------------------------------------------        ---------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
  menu: #- 修改
  home: /   #在菜单上显示首页  
  archives: /archives   //设置显示归档
  categories: /categories   // 设置显示分类
  tags: /tags   //设置显示标签
  about: /about   //设置显示关于
  #commonweal: /404.html

4. 菜单栏的图标设置:可从Font Awesome 网站查询图标对应的名称填入到对应的菜单项即可

#设置菜单的图标,规则为:菜单(左):图标名(右)
menu_icons:  
enable: true
#KeyMapsToMenuItemKey:   NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat

5. 设置博客的外观

# Schemes
#scheme: Muse   #默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
#scheme: Mist  #Muse 的紧凑版本,整洁有序的单栏外观
scheme: Pisces  #双栏 Scheme,当然也是我选择的

6. 设置社交链接(设置了Github、微博)

# Social Links
# Key is the link label showing to end users.
social:
GitHub: https://github.com/JuvoS
#Weibo: 
 #JianShu: http:http://www.jianshu.com/users/fca07070656b/latest_articles
#设置社交链接对应的图标
social_icons:
enable: true
# Icon Mappings. - 修改
KeyMapsToSocalItemKey:  NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo
#JianShu: heartbeat

# Blogrolls -设置友情链接
links_title: Links
#links_layout: block
#links_layout: inline
links:
豆沙包o小白 简书: http://www.jianshu.com/users/fca07070656b/latest_articles

7. 设置侧栏的头像

 # Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg  #修改 - 侧滑栏头像,可参考站点配置文件中关于头像的设置

注意一点使用next主题时,侧栏头像只能存储在主题目录下images文件夹里

8. 设置侧栏的方向(设置成左侧)

 sidebar:
 # Sidebar Position, available value: left | right
 position: left
 #position: right

9. 设置博客中代码高亮显示

# Code Highlight theme
 # Available value:
 #    normal | night | night eighties | night blue | night bright
 # https://github.com/chriskempson/tomorrow-theme
 # highlight_theme: normal
 # 代码高亮主题
 highlight_theme: night eighties

10. 添加网页计数器

# Show PV/UV of the website/page with busuanzi.
# Get more information on   http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer: 
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:
创建分类界面
  • 打开终端,定位到xxx.github.io目录下;
  • 执行下面的命令,新建一个名为categories的页面;
hexo new page categories
  • 创建完成后,在对应的目录下找到index.md文件,进行如下的修改:
---
title: categories
date: 2016-08-20 22:17:49
type: "categories" # 将页面的类型设置为 categories,主题将自动为这个页面显示所有分类
comments: false
---
这里是分割
这里是分割
创建标签界面
  • 打开终端,定位到xxx.github.io目录下;
  • 执行下面的命令,新建一个名为tags的页面;
hexo new page tags
  • 创建完成后,在对应的目录下找到index.md文件,进行如下的修改:
---
title: tags
date: 2016-08-20 22:17:49
type: "tags" # 将页面的类型设置为 tags,主题将自动为这个页面显示为标签云
comments: false
---
  • 上述创建的分类和标签界面是主题自动维护的,用户只需要按照规则书写文章即可。

如何写和发布博客

  • 在文章开头需要添加一些配置,如下:
---
title: 个人博客搭建详解(Windows和Mac通用版) # 这是标题
categories:   # 这里写的分类会自动汇集到 categories 页面上,分类可以多级
 - 博客站教程
 - 个人博客书写
tags: # 这里写的标签会自动汇集到 tags 页面上
- 专业
- 自由
---
  • 添加好上述配置后,就可以安心写文章了。
  • 最后,将写好的文章放到xxx.github.io/source/_post目录下即可;
测试
  • 本地进行测试。在终端上定位到xxx.github.io目录下,执行 hexo s命令,后在浏览器输入http://localhost:4000/即可看到博客的效果。
  • 可在终端输入下面的命令完成安装自动部署发布工具:
npm install hexo-deployer-git --save
mac上(sudo npm install hexo-deployer-git --save)

发布到GithubPages

当在本地确认博客效果后,就可以将md文件生成静态网页上传至GithubPages,在终端定位到xxx.github.io目录下,执行下面的命令即可:

hexo clean #清楚网页缓存
hexo g #生成静态网页
hexo d #开始部署
//当然也可以使用一次性命令:
hexo clean && hexo g && hexo d

注意:首次部署时,终端会让你输入Github的用户名和密码,按照要求填写后,稍等几分钟,就可以完后部署。

  • 此处若出现


    image

    windows系统下请勿使用cmd,笔者采用git bash出错多次,后重装git bash解决问题,原因为其采用cmd控制而产生错误

  • 成功输出


    image

浏览个人博客

  • 在浏览器上输入http://xxx.github.io就可以看到属于你的博客了。是不是很激动,那就赶紧行动吧!
以上内容是笔者在创建个人博客过程中一些做法,大家如有其它意见欢迎提出。
随笔
Web note ad 1