用hexo搭建我的博客
前言
现现在搭建我的博客并非一个很是难的事情，你甚至不须要会代码，由于有现成的框架。如今我将要搭建的博客是利用hexo搭建博客，托管在GitHub上。html
什么是hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其余渲染引擎）解析文章，在几秒内，便可利用靓丽的主题生成静态网页。node
准备工做
- 首先准备GitHub帐号
GitHub提供了GitHub Pages 帮助咱们来架设一个静态网站，因此咱们就不须要服务器了；由于Hexo 能够直接将文章编译成静态网页文件并发布，因此这样文章的内容、标题等信息就不必存数据库里面了，是直接纯静态页面了，也就不须要数据库了。android
- 安装git
虽然也能用cmd来安装使用，但可能会出现问题，最好全程使用git bashgit
- 安装node.js
Hexo需用经过npm安装，而npm须要node，如今只要安装node 就自带 npm了github
安装完成后，在打开cmd终端输入web
node -v npm -v
确认添加到环境变量shell
由于咱们是要经过npm来安装，而npm在国内下载很慢，须要更换为国内镜像源，这里使用淘宝的镜像源数据库
右键打开git bash, 输入命令npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
可能要等一会，没有进度条就直接装好了
使用hexo搭建博客
安装hexo
直接在git bash输入命令
cnpm install -g hexo-cli
安装完成能够用hexo -v查看hexo的信息
初始化
首先要先建一个文件夹，初始化后会在这个文件夹下生成一堆文件，以后全部操做都在这个文件中操做。
若是搭建过程当中有什么解决不了的问题，大不了把这个文件夹删了重来
初始化命令：
hexo init
速度可能比较慢，须要等待一会
完成以后就能够启动博客了
输入命令hexo s 就能够在本地4000端口启动博客
它会默认建立一篇文章为Hello World，里面会简单介绍hexo的使用方法
如何写文章
很简单，在git bash使用命令hexo n '个人第一篇文章'，这样就会在你的博客文件夹路径下\source\_posts文件夹下生成一篇markdown格式的文件，这样你就能够写文章了
写完后，保存，使用命令hexo generate（能够简写hexo g）生成，而后hexo s就能够在本地看到。
部署到GitHub上
在GitHub上新建一个仓库
仓库的命名：
而后create
安装插件
cnpm install --save hexo-deployer-git 这是用来远程部署到github上的一个插件
在部署以前，咱们须要先知道博客的部署地址，它须要对应 GitHub 的一个 Repository 的地址，这个信息须要咱们来配置一下。
打开博客根目录下的 _config.yml 文件，找到 Deployment 这个地方，把刚才新建的 Repository 的地址贴过来，而后指定分支为 master 分支，最终修改成以下内容：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: {git repo ssh address}
branch: master
个人就修改成：
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:wickteam/wickteam.github.io.git branch: master
而后就使用hsxo d 将博客推送到远端，中间可能会要求你输入GitHub用户名和密码
这样你就能输入username.github.io查看你的博客了
经常使用hexo命令
常见命令
hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server） hexo deploy #部署到GitHub hexo help # 查看帮助 hexo version #查看Hexo的版本
缩写：
hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy
组合命令：
hexo s -g #生成并本地预览 hexo d -g #生成并上传
配置SSH Key（能够不作）
git使用https协议，每次pull,push都要输入密码，使用git协议，使用ssh秘钥，能够省去每次输密码
大概须要三个步骤：
- 本地生成密钥对；
- 设置github上的公钥；
- 修改git的remote url为git协议。
生成密钥对
大多数 Git 服务器都会选择使用 SSH 公钥来进行受权。系统中的每一个用户都必须提供一个公钥用于受权，没有的话就要生成一个。生成公钥的过程在全部操做系统上都差很少。首先先确认一下是否已经有一个公钥了。SSH 公钥默认储存在帐户的主目录下的 ~/.ssh 目录。进去看看：
cwzdz@DESKTOP-PAT2F9O MINGW64 /e/hexo_blog $ cd ~/.ssh cwzdz@DESKTOP-PAT2F9O MINGW64 ~/.ssh $ ls id_rsa id_rsa.pub known_hosts
关键是看有没有用 something 和 something.pub 来命名的一对文件，这个 something 一般就是 id_dsa 或 id_rsa。有 .pub 后缀的文件就是公钥，另外一个文件则是密钥。
若是没有.ssh目录
$ ssh-keygen -t rsa -C "your_email@youremail.com" # 输入注册github的邮箱
而后直接三次enter，固然你也能够根据提示输入密码，我是默认回车的
这样 本地生成密钥对的工做就作好了
添加公钥到你的github账户
到.ssh目录下查看生成的公钥，通常为id_rsa.pub
- 能够直接在git bash上查看:
- 登陆GitHub，而后 Account Settings -> 左栏点击 SSH Keys -> 点击 Add SSH key
- 而后你复制上面的公钥内容，粘贴进“Key”文本域内。完了，add key
上述操做完成好了，输入
cwzdz@DESKTOP-PAT2F9O MINGW64 /e/hexo_blog $ ssh -T git@github.com Hi setcreed! You've successfully authenticated, but GitHub does not provide shell access.
若是输出这样的信息，就说明已经配置好了
绑定域名（看我的）
固然，你不绑定域名确定也是能够的，就用默认的 xxx.github.io 来访问，若是你想更个性一点，想拥有一个属于本身的域名，那也是OK的。
首先你须要注册一个域名，推荐去阿里云，毕竟大公司，不过最近.com域名提价了
绑定域名分2种状况：带www和不带www的。
域名配置最多见有2种方式，CNAME和A记录，CNAME填写域名，A记录填写IP，因为不带www方式只能采用A记录，因此必须先ping一下你的用户名.github.io的IP，而后到你的域名DNS设置页，将A记录指向你ping出来的IP，将CNAME指向你的用户名.github.io，这样能够保证不管是否添加www均可以访问，以下：
而后到你的github项目博客的根目录新建一个名为CNAME的文件（无后缀），里面填写你的域名，加不加www看你本身喜爱。
另外说一句，在你绑定了新域名以后，原来的你的用户名.github.io并无失效，而是会自动跳转到你的新域名。
hexo美化优化
修改主题
hexo默认的主题不怎么好看，能够修改。你能够在hexo文档查看hexo相关操做，能够自选主题，这里选择next主题，能够参考next使用文档
咱们能够直接到 Next 主题的 GitHub Repository 上把这个主题下载下来。
主题的 GitHub 地址是：https://github.com/theme-next/hexo-theme-next，咱们能够直接把 master 分支 Clone 下来。
首先命令行进入到博客根目录，执行命令：
git clone https://github.com/theme-next/hexo-theme-next themes/next
执行完毕以后 Next 主题的源码就会出如今博客的 themes/next 文件夹下。
而后咱们须要修改下博客所用的主题名称，修改项目根目录下的 _config.yml文件，找到 theme 字段，修改成 next 便可，修改以下：
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
而后执行hexo g从新生成
若是出现一些莫名其妙的问题，能够先执行hexo clean来清理一下public的内容，而后再来从新生成和发布。
就是下面的效果：
如今咱们已经成功切换到 next 主题上面了，接下来咱们就对主题进行进一步地详细配置吧，好比修改样式、增长其余各项功能的支持。
主题的样式
Next 主题还提供了多种样式，风格都是相似黑白的搭配，但整个布局位置不太同样，经过修改配置文件的 scheme 字段便可，我选了 Pisces 样式，修改 _config.yml（注意是 themes/next/_config.yml文件）以下：
# Schemes #scheme: Muse #scheme: Mist scheme: Pisces #scheme: Gemini
增长标签页和分类页
如今咱们的博客只有首页、文章页，若是咱们想要增长标签页，能够自行添加，这里 Hexo 也给咱们提供了这个功能，在博客根目录执行命令以下：
hexo new page tags
执行这个命令以后会自动帮咱们生成一个 source/tags/index.md 文件，打开后是这样的：
--- title: tags date: 2019-10-01 13:05:19 ---
咱们能够自行添加一个 type 字段来指定页面的类型：
--- title: tags date: 2019-10-01 13:05:19 type: tags ---
一样的，咱们能够这样增长分类页：
hexo new page categories
执行这个命令以后会自动帮咱们生成一个 source/categories/index.md 文件，打开后是这样的：
--- title: categories date: 2019-10-01 13:15:13 ---
添加type字段指定页面类型：
--- title: categories date: 2019-10-01 13:15:13 type: categories ---
都设置好了，如今再在主题的 _config.yml文件将页面的连接添加到主菜单里面，修改 menu 字段以下：
menu: home: / || home #about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat
这样页面就会这样：
添加中文
在博客根目录_config.yml文件下修改language：
title: Hexo subtitle: description: keywords: author: John Doe language: zh-CN timezone:
添加搜索页
不少状况下咱们须要搜索全站的内容，因此一个搜索功能的支持也是颇有必要的。
若是要添加搜索的支持，须要先安装一个插件，叫作 hexo-generator-searchdb，命令以下：
npm install hexo-generator-searchdb --save
而后在博客根目录下的_config.yml 里面添加搜索设置以下：
search: path: search.xml field: post format: html limit: 10000
而后在主题下的_config.yml文件中修改：
# Local Search # Dependencies: https://github.com/wzpan/hexo-generator-search local_search: enable: true # If auto, trigger search by changing input. # If manual, trigger search by pressing enter key or search button. trigger: auto # Show top n results per article, show all results by setting to -1 top_n_per_article: 5 # Unescape html strings to the readable one. unescape: false # Preload the search data when the page loads. preload: false
制做favicon标签栏图标
favicon 就是站点标签栏的小图标，默认是用的 Hexo 的小图标，若是咱们有站点 Logo 的图片的话，咱们能够本身定制小图标。
咱们能够上传图片到这个网站https://tool.lu/favicon/，制做站点小图标。
图标下载下来以后把它放在 themes/next/source/images 目录下面。
而后在next主题配置文件里面找到 favicon 配置项，把一些相关路径配置进去便可，示例以下：
favicon: small: /images/favicon -16x16-next.ico medium: /images/favicon -32x32-next.ico apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml
配置完成以后刷新页面，整个页面的标签图标就被更新了。
更改头像
avatar 这个就相似站点的头像，若是设置了这个，会在站点的做者信息旁边额外显示一个头像.
将其放置到 themes/next/source/images/avatar.png 路径，而后在主题 _config.yml文件下编辑 avatar 的配置，修改成正确的路径便可。
# Sidebar Avatar avatar: # In theme directory (source/images): /images/avatar.gif # In site directory (source/uploads): /uploads/avatar.gif # You can also use other linking images. url: /images/avatar.jpg # If true, the avatar would be dispalyed in circle. rounded: true # If true, the avatar would be rotated with the cursor. rotated: true
把url的#去掉，后面跟上你设置的图像路径，rounded是否设置成圆形，rotated是否设置成可旋转的。
设置RSS订阅
博客通常是须要 RSS 订阅的，若是要开启 RSS 订阅，这里须要安装一个插件，叫作 hexo-generator-feed，安装完成以后，站点会自动生成 RSS Feed 文件，安装命令以下：
cnpm install hexo-generator-feed --save
在博客根目录下运行这个命令，安装完成以后不须要其余的配置，之后每次编译生成站点的时候就会自动生成 RSS Feed 文件了。
启用侧边栏社交链
在next主题下的_config.yml设置以下：
social: GitHub: https://github.com/wickteam || github #E-Mail: mailto:yourname@gmail.com || envelope #Weibo: https://weibo.com/yourname || weibo #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype
快速返回顶部
咱们在浏览网页的时候，若是已经看完了想快速返回到网站的上端，通常都是有一个按钮来辅助的，在next主题下的_config.yml设置：
back2top: enable: true # Back to top in sidebar. sidebar: false # Scroll percent label in b2t button. scrollpercent: true
reading_process阅读进度条
# Reading progress bar reading_progress: enable: true # Available values: top | bottom position: top color: "#37c6c0" height: 2px
bookmark书签
书签，能够根据阅读历史记录，在下次打开页面的时候快速帮助咱们定位到上次的位置，你们能够根据喜爱开启和关闭
bookmark: enable: false # Customize the color of the bookmark. color: "#222" # If auto, save the reading progress when closing the page or clicking the bookmark-icon. # If manual, only save it by clicking the bookmark-icon. save: auto
github标签
在一些技术博客上，你们可能注意到在页面的右上角有个 GitHub 图标，点击以后能够跳转到其源码页面，能够为 GitHub Repository 引流，你们若是想显示的话能够自行选择打开，个人配置以下：
# Follow me on GitHub` banner in the top-right corner. github_banner: enable: true permalink: https://github.com/wickteam title: WickTeam GitHub
gitalk评论
因为 Hexo 的博客是静态博客，并且也没有链接数据库的功能，因此它的评论功能是不能自行集成的，但能够集成第三方的服务。
next主题集成了不少第三方评论插件，有changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte，gitalk是利用GitHub上的issue来评论的。
首先须要在 GitHub 上面注册一个 OAuth Application，连接为：https://github.com/settings/applications/new，注册完毕以后拿到 Client ID、Client Secret 就能够了。
首先须要在next主题_config.yml文件的 comments 区域配置使用 gitalk：
# Multiple Comment System Support comments: # Available values: tabs | buttons style: tabs # Choose a comment system to be displayed by default. # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte active: gitalk # Setting `true` means remembering the comment system selected by the visitor.
上面主要填写active
而后找到 gitalk 配置，添加它的各项配置：
# Gitalk # Demo: https://gitalk.github.io # For more information: https://github.com/gitalk/gitalk gitalk: enable: true github_id: wickteam # GitHub repo owner repo: wickteam.github.io # Repository name to store issues client_id: your_id # GitHub Application Client ID client_secret: your_secret # GitHub Application Client Secret admin_user: wickteam # GitHub repo owner and collaborators, only these guys can initialize gitHub issues distraction_free_mode: true # Facebook-like distraction free mode # Gitalk's display language depends on user's browser or system environment # If you want everyone visiting your site to see a uniform language, you can set a force language value # Available values: en | es-ES | fr | ru | zh-CN | zh-TW language: zh-CN
GitHub 受权登陆以后就可使用了，评论的内容会自动出如今 Issue 里面。
支持数学公式
可能在一些状况下咱们须要写一个公式，makdown是支持的，next也支持。
Next 主题提供了两个渲染引擎，分别是 mathjax 和katex，后者相对前者来讲渲染速度更快，并且不须要 JavaScript 的额外支持，但后者支持的功能如今还不如前者丰富，具体的对比能够看官方文档：https://theme-next.org/docs/third-party-services/math-equations。
这里选择 mathjax ,经过修改配置便可启用：
# Math Formulas Render Support
math:
enable: true
# Default (true) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in Front-matter.
# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
per_page: true
# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: true
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: true
Hexo 默认使用 hexo-renderer-marked 引擎渲染网页, 咱们须要卸载hexo-renderer-marked
mathjax 的使用须要咱们额外安装一个插件，叫作 hexo-renderer-kramed, 命令以下：
npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save
注意：使用的时候须要在 文章开头加上mathjax: true
pjax
可能你们据说过 Ajax，没据说过 pjax，这个技术实际上就是利用 Ajax 技术实现了局部页面刷新，既能够实现 URL 的更换，又能够作到无刷新加载。
要开启这个功能须要先将 pjax 功能开启，而后安装对应的 pjax 依赖库，首先修改_config.yml 修改以下：
pjax: true
而后安装依赖库，切换到 next 主题下，而后安装依赖库：
$ cd themes/next $ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
这样 pjax 就开启了，页面就能够实现无刷新加载了
tag标签
改成true，这样标签的#就没了
tag_icon: true
代码美化codeblock
在next主题_config.yml修改：
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
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: false
# Available values: default | flat | mac
style: mac
修改文章底部版权信息
creative_commons: license: by-nc-sa sidebar: true post: true
leancloud添加文章访问量统计
leancloud_visitors:
enable: true
app_id: # <app_id>
app_key: # <app_key>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: false
betterPerformance: false
字数统计
NexT 集成了 hexo-symbols-count-time 插件。
步骤：
npm install hexo-symbols-count-time --save- 在站点配置文件下加入
symbols_count_time: symbols: true # 文章字数统计 time: true # 文章阅读时长 total_symbols: true # 站点总字数统计 total_time: true # 站点总阅读时长 exclude_codeblock: false # 排除代码字数统计
- 在 next主题配置文件 中添加
symbols_count_time配置。
# Post wordcount display settings # Dependencies: https://github.com/theme-next/hexo-symbols-count-time symbols_count_time: separated_meta: true item_text_post: true item_text_total: false awl: 4 wpm: 275 suffix: mins.
其中：
awl：平均字符长度，默认为 4。
汉字 ≈ 2
英文 ≈ 4
俄文 ≈ 6
wpm：阅读速度。
慢 ≈ 200
正常 ≈ 275
快 ≈ 350
suffix：后缀，默认为 mins.。
对中文用户来讲：汉字的平均长度 ≈ 1.5，若是仅用中文书写没有英文的话，建议 awl 和 wmp 分别设置为 2 和 300。若是中英混合，建议 awl 和 wmp 分别设置为 4 和 275。
修改配色
NexT 主题默认色系是黑白色系。目前官方还没有提供颜色修改的配置，因此咱们能够经过修改相关 .styl 文件来修改主题颜色。
相关文件：
themes/next/source/css/_common/components/post/post-title.styl themes/next/source/css/_schemes/Pisces/_brand.styl themes/next/source/css/_variables/base.styl themes/next/source/css/_variables/Pisces.styl
连接持久化
Hexo 默认的文章连接是“年/月/日/标题”。之因此要作连接持久化是由于，中文 url 不利于 SEO，另外若是标题修改了，会致使连接发生变化，不利于文章的推广。因此咱们要作的就是把标题转成惟一的英文或数字字符串。这里推荐 rozbo 大神的 hexo-abbrlink。
步骤：
npm install hexo-abbrlink --save- 在
site config file中添加
permalink: posts/:abbrlink/ # abbrlink config abbrlink: alg: crc32 #support crc16(default) and crc32 rep: dec #support dec(default) and hex
例子：
crc16 & hex https://post.zz173.com/posts/66c8.html crc16 & dec https://post.zz173.com/posts/65535.html crc32 & hex https://post.zz173.com/posts/8ddf18fb.html crc32 & dec https://post.zz173.com/posts/1690090958.html
设置博客底部布局
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2019 #建站时间
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart #做者图标（默认是author人像)
# If you want to animate the icon, set it to true.
animated: true #图标是否闪动
# Change the color of icon, using Hex Code.
color: "#808080" #图标颜色
# If not defined, `author` from Hexo main config will be used.
copyright: 黄飘 #别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示做者
# -------------------------------------------------------------
powered:
# Hexo link (Powered by Hexo).
enable: false #是否显示 Powered by hexo
# Version info of Hexo after Hexo link (vX.X.X).
version: false #是否显示Hexo版本
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false #是否显示主题信息
# Version info of NexT after scheme info (vX.X.X).
version: false #是否显示主题版本
# -------------------------------------------------------------
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# http://www.miitbeian.gov.cn
beian:
enable: false #是否显示网站备案信息
icp:
# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a>
设置google字体镜像
font: # Use custom fonts families or not. # Depended options: `external` and `family`. enable: true # Uri of fonts host, e.g. //fonts.googleapis.com (Default). host: //fonts.lug.ustc.edu.cn
添加动态背景 canvas
站点地图sitemap
添加标签云
- 1. Hexo博客搭建之使用Hexo+GitHub搭建我的博客
- 2. hexo搭建我的博客
- 3. Hexo搭建我的博客
- 4. hexo 我的博客搭建
- 5. hexo我的博客搭建
- 6. 使用 hexo 搭建我的博客
- 7. Mac 使用Hexo搭建我的博客
- 8. 使用hexo+github搭建我的博客
- 9. 使用 Hexo + github 搭建我的博客
- 10. 用Hexo搭建我的博客
- 更多相关文章...
- • Swift 环境搭建 - Swift 教程
- • Rust 环境搭建 - RUST 教程
- • 适用于PHP初学者的学习线路和建议
- • C# 中 foreach 遍历的用法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Hexo博客搭建之使用Hexo+GitHub搭建我的博客
- 2. hexo搭建我的博客
- 3. Hexo搭建我的博客
- 4. hexo 我的博客搭建
- 5. hexo我的博客搭建
- 6. 使用 hexo 搭建我的博客
- 7. Mac 使用Hexo搭建我的博客
- 8. 使用hexo+github搭建我的博客
- 9. 使用 Hexo + github 搭建我的博客
- 10. 用Hexo搭建我的博客