搭建hexo博客
个人博客 http://gongzhijia.cn
安装gitbash
(相似于cmd,只不过我偏爱这个)
-
下载地址:https://git-for-windows.github.io/
-
安装步骤:傻瓜式下一步
-
完成之后,检验打开gitbash。输入命令
git version
查看版本
安装nodeJs
hexo是基于nodeJs环境下的静态博客
- 下载地址:https://nodejs.org/en/(LTS为长期维护版本,Current为最新版)
- 也是一路next , 过在Custom Setup这一步记得选
Add to PATH
,这样你就不用自己去配置电脑上环境变量了 , 装完在按win + r
快捷键调出运行,然后输入cmd确定,在cmd中输入node。检查环境,如果指令有反应。显示如图:
成功
安装hexo
创建一个文件夹用来存放blog的相关东西
安装hexo,命令:nmp i -g hexo
安装完成之后,用于检测是否安装成功。可查看其版本。命令hexo -v
初始化,命令:hexo init (稍作等待) 初始化完成之后打开文件可有如下
搭桥到github
-
没有账号创建一个即可
-
获得账号,创建一个repo,名称规则 yourname.github.io。其中yourname是你的github名称
-
回到gitbash中,配置github的账户信息。命令
git config --global user.name "YourName"
回车,接着再输入命令git config --global user.email "YourEmail"
。(其中引号中均是你的信息)
创建SSH
在gitbash中输入:`ssh-keygen -t rsa -C "youremail@example.com"`,生成ssh 。回车回车即可
紧接着,输入命令cd ~/.ssh
回车。cat id_rsa.pub
回车。
如图:
将上所得放置github的SSH keys中。title随便,key即为上所得
打开你的blog项目,找到_config.yml文件。修改:
deploy:
type: git
repo:https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
回到gitbash中,进入blog目录。分别执行以下命令:hexo clean
,hexo generate
,hexo server
.
打开浏览器输入本地网址 http://localhost:4000/
修改主题及主题优化
修改主题
我比较喜欢next主题,所以在这里以他为例:
下载主题:
gitbash命令cd到blog文件下,(推荐小白直接到blog文件夹下打开gitbash)。输入命令git clone https://github.com/iissnan/hexo-theme-next themes/next
。过程有些慢,稍等片刻即可。完成之后你将会在blog的theme文件夹下发现多出的next主题文件
配置
打开blog的_config.yml文件,找到theme。将其默认的landscape改为next。
—_config.yml文件详解
- site
# Site
title: 宫家小屋 网站标题
subtitle: '' 网站副标题
description: '' 网站描述
keywords: 网站关键字
author: gong 网站作者
language: en 网站语言,默认为en,中文写zh-Hans
timezone: '' 网站时区
- URL(一般不用修改)
URL
## 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: 永久链接中每个段的默认值
pretty_urls:
trailing_index: true # Set to false to remove trailing index.html from permalinks
- Directory(关于文件夹的一些设置,一般也不用修改)
Directory
source_dir: source 资源文件夹 ,存放用户的资源文件,默认为 source
public_dir: public 公用文件夹 ,存放生成的静态文件,默认为 public
tag_dir: tags 标签目录 ,默认为 tags
archive_dir: archives 档案目录 ,默认为 archives
category_dir: categories 分类目录 ,默认为 categories
code_dir: downloads/code 代码目录 ,默认为 downloads/code
i18n_dir: :lang i18n目录 ,默认为 :lang
skip_render: 储存站长验证文件,跳过指定文件的渲染
参考资料 https://blog.csdn.net/wsmrzx/article/details/81477926
查看
经过上述修改完毕时候,gitbash命令:hexo clean
,hexo gen
,hexo s
(这里可简写)
发表自己第一篇博文
命令$ hexo new "hexo-github博客搭建"
,打开文件如图:
可以看到刚创建的文档,均是md格式。打开即可进行编辑。
最后发到远端
- 先安装插件,gitbash命令
npm install hexo-deployer-git --save
- 执行命令
hexo clean
hexo generate
hexo deploy
接下来你就可以通过https://yourname.github.io 进行访问了
使得博文支持图片
-
设置站点配置文件_config.yml中 post_asset_folder:true。 ( Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder当您设置post_asset_folder为true参数后,在建立文件时,Hexo会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹。 )
-
安装插件:blog目录下gitbash命令
npm install https://github.com/CodeFalling/hexo-asset-image --save
-
安装完成之后,新建博文。打开博文文件。发现如图:
-
文章插入图片格式推荐
![](hexo-github博客搭建/10.png) 括号内为其相对地址,小白可直接写文件名字+图片名字
设置背景图
在 themes/*/source/css/_custom/custom.styl 中添加如下代码:
body{
background:url(/images/bg.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
同时找一张图片放入images文件内,记得与上述url对应名字
设置评论功能
因为多个 论系统已经下线或者是外国网站,容易被墙,所有这里选择valine
操作
- 打开next文件夹的_config.yml文件,找到valine字段 。设置enable字段值为true
- 然后前往leancloud注册账号,随意注册一个应用 。根据下图,打开设置.复制Appid和APPkey
- 到主题下的valine字段配置文件中
- 完成效果图: