7月5日左右搭建成功的,算比较新鲜吧:) 记录一下操作步骤,感谢前人,希望能帮到其他人。主要涉及github,hexo,多说。
github: 我想你懂得,万一你不懂,百度可以帮助你;
hexo : 博客博客模板框架 - 基于nodejs
多说 : 一个现成的评论模块,据说是国内最好的
下面每个讲讲,nodejs和git不说了。
github
首先你得有一个github的账户, ssh链接也配置好。
GitHub Pages 建立博客
GitHub Pages分两种,一种是你的GitHub用户名建立的username.github.io这样的用户&组织页(站),另一种是依附项目的pages。
建立个人的博客使用第一种,像 sam2099.github.io 。
GitHub Pages
hexo
安装Hexo
1 | $ npm install -g hexo-cli |
初始化
找个干净好找的地方建个文件夹hexo,然后执行
1 | $ hexo init |
hexo会自动建好目录和文件。
看看初始效果
在当前目录(hexo)运行,然后到浏览器输入localhost:4000看看。
1 | $ hexo g |
哈哈,正常的话,可以看到了。
主题
目前来说 NexT 这个主题最符合我的口味。
- 安装
1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
- 主题配置
在themes/next
目录的_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
# Dark Mode
darkmode: false
# 菜单
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat
RSS: /atom.xml || fa fa-rss
# 代码
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: default
# Available values: default | flat | mac
style:
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
favicon:
small: /favicon.ico
medium: /favicon.ico
apple_touch_icon: /favicon.ico
safari_pinned_tab: /favicon.ico
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml - hexo 配置
Hexo目录下的config.yml配置文件中的theme属性,将其设置为next
。1
theme: next
Quick Start
下面是hexo init 时生成的操作命令,够用了。
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Create a new post
1 | $ hexo new "My New Post" |
More info: Writing
Run server
1 | $ hexo server |
More info: Server
Generate static files
1 | $ hexo generate |
More info: Generating
Deploy to remote sites
1 | $ hexo deploy |
More info: Deployment
hexo 设置
根据自己爱好来对Hexo生成的网站进行设置了,对整站的设置,只要修改项目目录的_config.yml就可以了。
注意空格, 冒号后面一定跟一个空格;层级关系也需要空格。
我所有的 博客源文件 可以和blog对照着看。
主要设置的地方:
1 | Site |
插件
RSS
安装
1 | $ npm install hexo-generator-feed --save |
配置
参考主题的 menu
sitemap
安装
1 | $ npm install hexo-generator-sitemap --save |
配置
参考主题的 menu
hexo-util
Next主题需要
安装
npm install hexo-util --save
github pages
上传到 github pages 需要
安装
npm install hexo-deployer-git --save
搜索
NexT 主题自带了一个搜索功能 Local Search,即在编译文件时本地生成一个数据库,放在网站根目录下,用户借助此数据库进行搜索查询。 安装:
1 | npm install hexo-generator-searchdb --save |
配置
参考主题的 local_search
域名映射
在source根路径下,创建文件CNAME(无后缀,大写);内容就一行,是你需要映射的域名,比如我的
1 | giveme5.top |
图片缩放
启用NexT内嵌的图像缩放插件,以允许放大图像。NexT提供了两个插件:fanncybox和mediumzoom,前者功能更加强大,而后者更加轻巧所以网页加载更快,按需选择。
修改主题配置文件,如fancybox: true即可, 不要2个同时为true。
藏在最后
这是第一篇,我想这个作为笔记,有需要就可以拿出来看看,省得记载纸上找不到;所以这个大概是给自己看的。