媒介
搭建此博客是因为经由过程github上相识到github pages进而知道了能够把静态网页博客托管给github堆栈
也许您已通Git + Hexo 搭建个人博客网站相识到怎样经由过程HEXO + GIT 完成个人博客网站的竖立。然则只管您已胜利竖立博客网站,然则你须要对网站做适宜的设置和调解才投合你的网站请求。本文重要引见HEXO的基本操纵敕令和网站的基本设置要领。
<!–more–>
github pages引见
Github Pages 是 github 公司供应的免费的静态网站托管效劳,用起来轻易而且功能强大,不仅没有空间限定(为免费用户供应了500M空间),还能够绑定本身的域名。
到 https://pages.github.com/ 上,看到能够建立的网站有两类,一类是为本身或许是本身的构造建立站点,就是新建一个堆栈,堆栈的名字叫做,username.github.io 或许是 orgnizationname.github.io ,注重这里的 username 和 orgnizationname 要严厉替换成你本身的用户名或许构造名,大小写也要辨别,不然就会有题目。然后就往堆栈内里放页面内容就好了。第二类是为项目建立网站,这个实在重要步骤都是一样的,只不过轻微比建立用户或构造网站庞杂一点点。
详细的能够看这个网址的解说Github Pages
域名注册和绑定
我是在万网注册的域名和设置DNS剖析,所以我只会讲在阿里云下的域名绑定。
进入到掌握台后点击本身刚买的域名进入域名治理界面,然后举行增加剖析操纵,根据途中所给的值填写,注重将纪录值改成本身的github pages地点
末了一步必需在所竖立的github堆栈的主分支里竖立一个CNAME文件内容为你要剖析到的目地地点
hexo装置和设置
Hexo博客搭建的基本大抵流程为:
装置Node.js →装置Git → 装置Hexo → 装置主题 → 当地测试运转 → 注册给github与coding并建立pages堆栈 → 布置
Node.js和git的装置人人本身去网上搜下,当以上都安好后能够经由过程git bash来输入敕令检察是不是装置胜利以及对应的版本
随后实行下述敕令来装置hexo
npm install -g hexo-cli
hexo初始化
装置完成后要先提早建好一个文件夹,所以我在本身D盘竖立了一个hexo文件夹,内里随后剪了一个blog文件夹,用敕令cd到blog这个目次
cd d:/hexo/blog
实行敕令
hexo init # hexo会在目的文件夹竖立网站所须要的一切文件
npm install # 装置依靠包
当地启动
有了必要的种种设置文件以后就能够在当地预览效果了
hexo g # 等同于hexo generate,天生静态文件到public文件夹
hexo s # 等同于hexo server,在当地效劳器运转
另有个敕令
hexo clean #作用为消灭静态文件夹的内容并删掉,重要用于变动变动了某些处所致使页面显现不完善
以后翻开浏览器并输入IP地点 http://localhost:4000/ 检察,效果以下
新建页面和文章
hexo new "title" # 天生新文章:\source\_posts\title.md
hexo new page "title" # 天生新的页面,背面可在主题设置文件中设置页面
天生文章或页面的模板放在博客文件夹根目次下的 scaffolds/ 文件夹内里,文章对应的是 post.md ,页面对应的是page.md,草稿的是draft.md
编辑文章
翻开新建的文章source_postspostName.md,个中postName是hexo new “title”中的title
---
title: Start My Blog Trip — Power By Hexo # 文章页面上的显现称号,能够恣意修正,不会出现在URL中
date: 2017-2-10 23:49:28 # 文章天生时刻,平常不改
categories: diary # 文章分类目次,多个分类应用[a,b,c]这类花样
tags: [Hexo,diary] # 文章标签
---
#这里开始应用markdown花样输入你的正文。
<!--more-->
#more标签以下的内容要点击“浏览全文”才瞥见,#more标签以上的内容为你首页显现文章的择要部份
MD文章编辑
假如你对MD语法不熟悉,引荐你去马克飞象应用它的在线网页编辑,能够完成一边打字一边检察效果,很轻易。
地点:https://maxiang.io/
常用敕令总结
hexo init [folder] # 初始化一个网站。假如没有设置 folder ,Hexo 默许在现在的文件夹竖立网站
hexo new [layout] <title> # 新建一篇文章。假如没有设置 layout 的话,默许应用 _config.yml 中的 default_layout 参数替代。假如题目包括空格的话,请应用引号括起来
hexo version # 检察版本
hexo clean # 消灭缓存文件 (db.json) 和已天生的静态文件 (public)
hexo g # 即是hexo generate # 天生静态文件
hexo s # 即是hexo server # 当地预览
hexo d # 即是hexo deploy # 布置,可与hexo g合并为 hexo d -g
装置主题
媒介
停止2017年,hexo和next都在更新,当今网上的版本和其对应的设置文件都已发生了庞大的变化,所以我把官网最新的17年的版本设置文件的概况给人人来解说,人人能够下最新的版本和看我的设置举行修正。
主题下载
hexo主题有许多,这里我本身应用的next主题所以就以它来说。我的版本为v5.1.0(现在最新)
下载地点:
https://github.com/iissnan/hexo-theme-next/releases
把下来的文件夹解压和更名为next,并复制到theme目次下
HEXO网站的设置文件
在根目次下的_config.yml重如果对网站的总属性举行设置
如:网站题目,网站logo,网站插件应用等全局的属性
主题目次下的_config.yml重如果针对网站的规划,导航等特征设置举行设置
我的根目次设置文件
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Water Sister's Blog
subtitle: 生涯、手艺个人博客
description: 思考中.....
author: Yang ZiHao
language: zh-Hans
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.cduyzh.com
root: /
permalink: :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:
- baidu_verify_n9RJHacKra.html
- google5caece7c800b9ce3.html
# 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: true
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:
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:cduyzh/cduyzh.github.io.git,master
index_generator:
per_page: 5
archive_generator:
per_page: 20
yearly: true
monthly: true
tag_generator:
per_page: 10
menu:
about: /about
#头像设置
avatar: /images/yzh.jpg
# 多说热评文章 true 或许 false
duoshuo_hotartical: true
#sitemap
# hexo sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
#local search
search:
path: search.xml
field: post
format: html
limit: 1000
我的主题目次设置文件
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/favicon.ico
# Set default keywords (Use a comma to separate)
keywords: "cduyzh前端开辟博客"
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss:
# Specify the date when the site was setup
#since: 2015
# icon between year and author @Footer
authoricon: tint
# Footer `powered-by` and `theme-info` copyright
copyright: false
# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true
# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: true
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
categories: /categories
about: /about
archives: /archives
tags: /tags
#commonweal: /404.html
#sitemap: /sitemap.xml
life: /categories/life
technology: //categories/technology
# Enable/Disable menu icons.
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
schedule: calendar
tags: tags
archives: archive
sitemap: sitemap
commonweal: heart
life: coffee
technology: cog
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal italic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host:
# Global font settings used on <body> element.
global:
# external: true will load this font family from host.
external: true
family: Lato
# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family:
# Font settings for posts
# Fallback to `global` font settings.
posts:
external: true
family:
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family:
size:
# Font settings for <code> and code blocks.
codes:
external: true
family:
size:
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
#LinkLabel: Link
GitHub: https://github.com/cduyzh
知乎: https://www.zhihu.com/people/yang-zi-hao-cheng-du-da-xue
Weibo: http://weibo.com/3290722423/
QQ: http://wpa.qq.com/msgrd?v=3&uin=450311265&site=qq&menu=yes
# Social Links Icons
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
# When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
GitHub: github
#Twitter: twitter
Weibo: weibo
QQ: qq
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
#avatar:
# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right
# Sidebar Display, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggle.
#display: post
display: always
#display: hide
#display: remove
# Sidebar offset from top menubar in pixels.
offset: 12
offset_float: 0
# Back to top in sidebar
b2t: false
# Scroll percent label in b2t button
scrollpercent: false
# Blog rolls
links_title: Links
#links_layout: block
#links_layout: inline
links:
hexo: https://hexo.io/zh-cn/
next: http://theme-next.iissnan.com/
web project: http://www.watersister.top
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 400
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at: false
categories: true
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
#Wechat Subscriber
#wechat_subscriber:
# enabled: true
# qcode: /images/wechatpay.jpg
# description: subscribe to my blog by scanning my public wechat account
# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------
# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
enabled: false
image:
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support
mathjax:
enable: false
per_page: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# Swiftype Search API Key
#swiftype_key:
# Baidu Analytics ID
#baidu_analytics:
# Duoshuo ShortName
duoshuo_shortname: cduyzh
# Disqus
#disqus_shortname:
# Hypercomments
#hypercomments_id:
# Gentie productKey
#gentie_productKey:
# Support for youyan comments system.
# You can get your uid from http://www.uyan.cc
#youyan_uid: your uid
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
#livere_uid: your uid
# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
#baidushare:
## type: button
# Share
#jiathis:
# Warning: JiaThis does not support https.
#add_this_id:
# Share
duoshuo_share: true
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
#google_analytics:
# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
#yandex_site_verification:
# CNZZ count
#cnzz_siteid:
# Application Insights
# See https://azure.microsoft.com/en-us/services/application-insights/
# application_insights:
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: false
user_id: 6224774254659896065
admin_nickname: author
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
enable: false
app_id: #<app_id>
fb_admin: #<user_id>
like_button: #true
webmaster: #true
# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
enable: false
num_of_posts: 10 # min posts num is 1
width: 100% # default width is 550px
scheme: light # default scheme is light (light or dark)
# VKontakte API Support.
# To get your AppID visit https://vk.com/editapp?act=create
vkontakte_api:
enable: false
app_id: #<app_id>
like: true
comments: true
num_of_posts: 10
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz
app_key: 5rH911Nhs9V7AWFjEYqe8Bz7
# 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: false
page_pv_header: <i class="fa fa-file-o"></i> 点击量
page_pv_footer: 次
# Tencent analytics ID
# tencent_analytics:
# Tencent MTA ID
# tencent_mta:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
# Google Calendar
# Share your recent schedule to others via calendar page
#
# API Documentation:
# https://developers.google.com/google-apps/calendar/v3/reference/events/list
calendar:
enable: false
calendar_id: <required>
api_key: <required>
orderBy: startTime
offsetMax: 24
offsetMin: 4
timeZone:
showDeleted: false
singleEvents: true
maxResults: 250
# Algolia Search
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"
# Local search
local_search:
enable: true
# External URL with BASE64 encrypt & decrypt
# Usage: {% exturl text url "title" %}
# Alias: {% extlink text url "title" %}
exturl: false
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Canvas-nest
canvas_nest: true
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib
# Internal version: 2.1.3
jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js
# Internal version: 2.1.5
# Fancybox: http://fancyapps.com/fancybox/
fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
# Internal version: 1.0.6
fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
# Internal version: 1.2.1
velocity:
# Internal version: 1.2.1
velocity_ui:
# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser:
# Internal version: 4.6.2
# See: http://fontawesome.io/
fontawesome: //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css
# Internal version: 1
# https://www.algolia.com
algolia_instant_js:
algolia_instant_css:
# Internal version: 1.0.0
# https://github.com/hustcc/canvas-nest.js
canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js
# Assets
css: css
js: js
images: images
# Theme version
version: 5.1.0
# 多说热评文章 true 或许 false
duoshuo_hotartical: true
reward_comment: 对峙原创手艺分享,您的支撑将勉励我继承创作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
PS:能够不必一次性看完,理解下各个属性即可,官网也没有对一切设置的中文诠释,只要一些例子设置对应的参数罢了。
置信绝大数人都没看完,人人能够背面本身设置的时刻再来看。
启用主题
翻开站点设置文件, 找到 theme 字段,并将其值变动成 next
theme: next
注重:后有个空格必须要有空格哦
然后 hexo s 即可在localshost:4000地点里预览主题效果
替换主题表面
next有三个主题款式
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
我用的是第二个
替换言语为中文,在根目次设置文件下设置language: zh-Hans
# Site
title: Water Sister's Blog
subtitle: 生涯、手艺个人博客
description: 思考中.....
author: Yang ZiHao
language: zh-Hans
timezone:
增加网站小图标
在主题目次设置文件下设置
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/favicon.ico
大部份的设定都能在NexT的官方文档 内里找到,如侧栏、头像、打赏、批评、定阅、衔接、分享、数据统计等等,在此就不多讲了,照着文档走就好了,接下只是特性定制的题目。
所以给个官方文档人人能够本身去看一遍:
http://theme-next.iissnan.com/theme-settings.html
布置刊行项目
媒介
假定前面已注册了github帐号和建立了对应的堆栈,经由过程设置SSH来竖立衔接。
天生SSH
$ ssh-keygen -t rsa -C "邮件地点@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>
体系会请求你输入暗码,这里设置的暗码重如果在你提交Git时弹出暗码认证,不想输入直接回车
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>
胜利后如图:
设置SSH
找到id_rsa.pub 并复制文件内容
id_rsa.pub文件平常位于电脑用户设置文件夹下的一个.ssh文件下C:Users你的用户名.ssh
登录Github并增加密钥
进入github首页在右上角挑选settings设置。
建立一个新的SSH key,图中显现我已建立好了。
title能够随意取
测试经由过程git bash链接到Git
链接Git
$ ssh -T git@github.com
提醒以下:yes
The authenticity of host 'github.com (207.65.227.44)' can't be established.
RSA key fingerprint is 16:27:42:18:60:1d:7b:13:d2:b5:c4:20:7e:56:86:d8:71:f3
Are you sure you want to continue connecting (yes/no)?
以下为胜利链接到Git
Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.
应用Git bash简朴的设置一下用户信息:
git config --global user.name your name
git config --global user.email your_email@youremail.com
布置到Github
在此之前,先装置Git布置插件
npm install hexo-deployer-git --save
翻开根目次设置文件,拉到底部,修正布置设置:
deploy:
type: git
repo:
github: git@github.com:cduyzh/cduyzh.github.io.git,master
注重冒号背面是网站对应的用户名,接着就是/,然后再是你的项目名加上 .git,master
保留后终端实行
hexo clean
hexo g
hexo d
效果以下为胜利上传
总结
到这里基本上完成了hexo的设置和项目的上传,背面我会讲一些文章的编辑,分类,标签的应用,还会对next主题举行一些剖析,假如想本身设置主题和款式发起先把next主题的官方中文文档看一下,我会对个中的一些举行诠释。