概述
hexo个人博客
欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
一 Git 安装及GitHub账号注册
Git
详细安装教程————点击此处
GitHub
账号注册详细教程————点击此处
二 NodeJS 安装
NodeJs
详细安装过程和环境配置————点击此处
三 Hexo 安装
Hexo
基本框架搭建过程————点击此处
四 基本主题next
开启GitPages服务
搭建我们的个人博客需要一个唯一的域名,当然我们可以申请购买一个域名来使用,但是在不是太必要的情况下,我们也可以通过Github Pages获得一个免费使用的域名,这需要我们在Github上新建一个仓库,如下:
- 登录Github,右上角创建一个项目,也可以参照我的另外一个同系列的文章
- hexo搭建个人博客之Github账号注册
这个过程和建立普通的仓库没什么区别,关键在于新仓库的名字,一定要是UserName+“github.io”的形式。这也是之前强调的要起一个好的用户名的原因。这样之后我们最后的博客网站的链接就会是:https://UserName.github.io的形式。
注意:固定新仓库的名字格式并非必须,只是这样操作生成的博客域名比较短小简洁,另起他名生成博客域名会很冗长。
点击Create Repository
之后,选择settings
进入如下:
找到GitHub Pages
找到choose theme
之后进入主题仓库,任意选择一个主题,这里我选择的是这个
此时再去查看settings
,会发现GitHub Pages
变化如下
现在,我们就可以使用https://UserName.github.io,访问自己的博客网站了,打开链接我们会看到默认主题的个人博客样式如下(虽然有点点丑,是吧):
备注:由于我的有一个服务已经在开着了,电脑太卡了,这里借用参考文档的图片
创建一个本地博客站点
打开windows命令面板,输入以下指令
1 | hexo init myBlog |
测试本地博客
1 | hexo g //g是generetor的缩写,生成博客 |
此时打开浏览器,输入 http://localhost:4000/,我们将会看到Hexo自带默认主题显示的博客样式如下(呃,是好看了那么一点点):
同步GitHub,允许公共访问
在本地我们已经搭建了博客,但是还只能自己本地访问。若要别人也能看到,那就需要我们将其同步部署到GitHub上了。还记得我们之前准备的Github仓库吗,这里就要用到了。
首先找到我们的博客仓库,并拷贝仓库地址:
然后修改本地站点的配置_config.yml文件,修改deploy下的配置如下:
1 | deploy: |
现在,我们再次访问链接:https://userName.github.io,就会发现这里的界面和本地的一样了。如此一来我们搭建的个人博客网站就基本完成了。
下载主题-Next(官网)
安装Git部署插件
1 | npm install hexo-deployer-git --save // 有版本号即成功 |
下载Next,参考安装包,或直接克隆
1 | git clone https://github.com/iissnan/hexo-theme-next themes/next |
启用主题
在 Hexo 中有2份主要的配置文件,其名称都是_config.yml
。
一份是站点配置文件,在站点根目录下
另一份是主题配置文件,在主题目录下,比如我们这里用到的是next
主题,则在myHexoBlogthemesnext
下
打开themes/next/下的_config.yml,查找scheme,可以看到四种不同的风格。去掉#注释,即启用对应的scheme,博主采用Gemini主题,大家可以依次测试效果,选择自己喜欢的scheme。
打开根目录下的_config.yml,查找theme字段,将字段改为theme: next(冒号:之后要有空格分隔,否则无效) 之后通过hexo g和hexo s,再在浏览器中访问localhost:4000
即可本地预览主题效果。
主题基础配置
设置过程中,可运行在本地查看,步骤跟之前一样(注意所有的:后面都要空一格!!!
)。
设置菜单
找到主题next的_config.yml
查找menu`
,去掉#
注释即可显示对应的菜单项。
设置网站基本信息和语言
找到站点的_config.yml
,找到Site如下设置。
设置个人信息
找到主题next的_config.yml
,找到social如下设置。
设置头像
进入themes/next/source/uploads下,找到avatar.png,放入一张同样大小的图片替换名字。之后找到主题next的_config.yml
,找到avatar如下设置。
更多美化next
主题参考
请点击next美化主题1-4
hexo seo优化
整个系列文档推荐
hexo搭建个人博客之Git安装
hexo搭建个人博客之Github账号注册
hexo搭建个人博客之NodeJs安装
hexo搭建个人博客之Hexo安装
hexo搭建个人博客详细教程
装逼路上的小插曲一:博客上传图片无法显示
本文参考文档
Hexo搭建个人博客(一)——框架搭建
Hexo搭建个人博客网站详细流程
Hexo博客搭建
最后
以上就是直率小海豚为你收集整理的hexo搭建个人博客详细教程hexo个人博客的全部内容,希望文章能够帮你解决hexo搭建个人博客详细教程hexo个人博客所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复