搭建自己的个人网站(下)
本篇个人网站搭建系列博文是基于:GitHub+Hexo。
难度指数：♥♥
系统环境：win8
修饰上篇搭建的个人网站框架(包括theme主题设置、头像的设置、以及图片的显示、链接上自己的RSS)
Hexo克隆主题
在初始化hexo后，也就是执行hexo init 命令后会给一个默认的主题：landscape。里面还有一篇写好的示例文章：Hello World
选择喜欢的主题
觉得不喜欢可以换主题，以下链接可以供你挑选自己喜欢的主题
Themes
我选择的是Aisina，这里就以Aisina为例，讲主题的配置
通过git命令下载
找到之后通过git命令下载
界面右侧，在主题的repository点击clone 复制一下那个地址
在你计算机本地文件夹 YUTING0907.github.io/themes/ 下新建一个文件夹Anisina
执行复制代码
$ git clone 复制的地址 themes/Anisina
后面还可以将自己博客个性化装饰~
修改整站配置文件
配置文件是 _config.yml，在YUTING0907.github.io目录下，可以用记事本打开，但推荐用Nodepad++或者UE打开。
修订清单如下，文档内有详细注释，可按注释逐个修订
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: YUTING
subtitle: 2019 TO BE YOUR YEAR
description: "YUTING在 Github 上的个人博客"
keywords: ML
author: Echo Yu
language: zh-CN
timezone: Asia/Shanghai
# custom Site settings
# more detail check out docs
SEOTitle: YUTING’s blog
header-img: //o7bkkhiex.bkt.clouddn.com/lion-blur-bg.jpg
email: YUTING9597@163.com
favicon: # your favicon png
# custom end
# URL
## If your site is put in a subdirectory, set url as ‘http://yoursite.com/child' and root as ‘/child/‘
url: http://YUTING0907.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# SNS settings
# RSS:
weibo_username: ytfantastic
zhihu_username: yu-ting-66-78
github_username: YUTING0907
twitter_username: YUTING
facebook_username: YUTING
linkedin_username:
# Build settings
anchorjs: false # if you want to customize anchor. check out line:181 of `post.html`
# Disqus settings
disqus_username:
# Duoshuo settings
duoshuo_username: # 你的多说帐号
# Share component is depend on Comment so we can NOT use share only.
duoshuo_share: true # set to false if you want to use Comment without Sharing
# Use livere
use_livere:
# Valine comment system https://valine.js.org
valine:
enable: false
appid: #Leancloud应用的appId
appkey: #Leancloud应用的appKey
verify: false #验证码
notify: false #评论回复提醒
avatar: mm #评论列表默认头像样式
placeholder: Just go go #评论框占位符
# Analytics settings
# Baidu Analytics
ba_track_id:
# Google Analytics
ga_track_id: # Format: UA-xxxxxx-xx
ga_domain:
# Featured Tags
featured-tags: true # whether or not using Feature-Tags
featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value
# friends
friends: # 友链
# 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: true
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: Anisina
markdown:
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-emoji
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:YUTING0907/YUTING0907.github.io.git
branch: master
# Qiniu imageView2 API
# More info http://developer.qiniu.com/code/v6/api/kodo-api/image/imageview2.html
clip-content: “?imageView2/1/w/1400/h/400/interlace/1/q/90”
clip-avatar: “?imageView2/2/w/300/h/300/interlace/1/q/90”
clip-home-post-bg: “?imageView2/1/w/800/h/300/interlace/1/q/70”
# post default images
post-default-img: "5.gif" #博文默认的图片
post-default-img-mobile: #移动端显示的图片
# search api , set your custom key
swiftype_key:
# archive page title
archive:
title: archives
description: 可以根据归档日期检索所有文件
# Sidebar settings
sidebar: true
sidebar-about-description: "看看你的时间都花在哪了"
sidebar-avatar: /image/20181215001153.jpg
# img CDN path
cdn-url: "http://pjqhk6p7v.bkt.clouddn.com/"
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /image/WeChatQR.jpg
alipay: /image/aipay.jpg
post_copyright:
enable: true
author: yuting
copyright_text: 作者拥有版权，请注明出处转载。
# create by yuting
#gitment
gitment:
#id：
owner: YUTING0907
repo: YUTING0907.github.io
client:
id: d9972ee4a19b27a1c952
secret: 717a42cc6c5bb05dbf6b53180def49e7e4e42501
在Github上设置OAuth Apps
生成一个OAuth Apps
然后在 _config.yml里设置上id，secret,如下图
#gitment
gitment:
#id：
owner: YUTING0907
repo: YUTING0907.github.io
client:
id: d9972ee4a1
secret: 717a42cc6c5bb05dbf6b5318
启用新下载的主题
在刚打开的的_config.yml 文件中，找到“# Extensions”，把默认主题 landscape 修改为刚刚下载下来的主题名：Aisina。
更新主题
git bash 里执行
$ cd themes/主题名
$ git pull
每次修改都要hexo g 生成一下
再hexo d部署一下
头像设置（侧边栏的个人简介）
Sidebar settings
sidebar: true
sidebar-about-description: "看看你的时间都花在哪了"
sidebar-avatar: /image/20181215001153.jpg
sidebar-avatar后面跟的就是你想设置的头像，事先你需要把照片放在image目录下。
sidebar-about-description就是描述
这是我设置成功后的效果。
图片的显示
1.1设置站点配置_config.yml
post_asset_folder: true
1.2 cdn-url
注册一个你自己的七牛CDN ，然后拷贝你自己的CDN URL
在七牛里上传图片
复制外链
这里可以不选择运用七牛
还可以安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
这个插件在运行hexo n “xxxx”来生成新md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹，你可以讲要引用的照片放在此目录下。然后只需要在xxxx.md中按照markdown的格式引入图片：
! [ 这里输入图片描述] ( xxxx/图片名.jpg )
这里我没有尝试成功，我看网上有很多引用成功的都是在hexo g生成页面后，进入public文件中查看相关字段，可以发现，html标签内的语句是< img src=”…xxxx/图片名.jpg”>，而不是< img src=”xxxx/图片名.jpg>，而我生成的是< img src=”xxxx/图片名.jpg>，不知道什么原因。大家可以尝试造作一下。
1.3 运用
格式即可在文章中显示照片。
博文标题背景图片
header-img: "http://sometest.png"
如果你没有设置的话，会默认使用 _config.yml 下 post-default-img指定的背景图像
使用 cdn 标签，切换单页面背景图片的URL
cdn: 'header-off'
header-img: "http://www.imagestest.com/god.png"
链接weibo，知乎，github
# RSS:
weibo_username: ytfantastic
zhihu_username: yu-ting-66-78
github_username: YUTING0907
twitter_username: YUTING
facebook_username: YUTING
linkedin_username:
上述配置可以在你的网站上链接上你的weibo，知乎，github等平台页面。前提是你要设置weibo域名，知乎域名等平台域名，不懂如何设置域名可以自行百度啦操作很简单的
觉得不错的话，给点打赏吧 ୧(๑•̀⌄•́๑)૭
wechat pay
alipay