没错,半小时入门,能搭起来网站,然后后期修改等一共预计整体耗时2~5天。
采用HEXO搭建个人博客,配合其中的hueman主题,根据个人需要进行修改,整体都托管在github上。在万网申请一个域名,来解析对应的github,就可以访问啦~
先上自己的效果图~我的博客
整体流程
一、申请github账号,本机电脑安装git,node.js
二、通过hexo创建博客网站
三、下载hexo中的hueman主题
四、hueman主题基本修改+域名解析
五、开始写第一个博客
六、博客menu菜单栏、侧边展开定制
七、字数统计、访问量统计、评论系统 百度和谷歌收录SEO
一、申请github账号,本机电脑安装git.bash,node.js
1、github申请,注册等等不再赘述,有github账户后,创建一个仓库repository,仓库名必须和你的github用户名一致,操作如下图。
repository的作用是,将你的hexo博客部署在github上,由github托管你的博客载体,后期维护只需要添加内容即可,不需要另外申请服务器来存你的博客。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7XdjAGEZ-1576073094252)(https://ftp.bmp.ovh/imgs/2019/12/4683584a43a4c460.png)]
在本机(windows)安装git.bash和node:官网下载安装包,并添加到系统变量(如果在此之前你有类似webstorm或VS这样的编辑器,应该有node环境)。
二、通过hexo创建博客
安装hexo
hexo是一款开源的博客系统,也是一个制作博客的工具。开源是因为hexo源码可见,你可以随自己的想法来定制修改,另一方面hexo现在集成度很好,很多功能都已经兼容,而且有上百种主题(hueman主题就是其中之一,功能最丰富的就是NexT主题)。
自己先创建一个文件夹,该文件夹用来存hexo和以后你的博客,在cmd或者Git中进入到你的文件夹,执行:
npm install -g hexo
通过npm安装并生成(generate)hexo,初始化hexo init
再通过以下命令即可在浏览器中打开博客:
hexo c
(或者全写 hexo clean,先对hexo清理)
hexo g
(或者全写hexo generater,生成hexo网站,相当于平时所用的build或debug)
hexo s
(即hexo serve,开启服务)
此时在浏览器中输入localhost:4000 即可查看。
当你在浏览器里看到网站时,不要悲伤不要心急,忧虑的日子总会过去,因为到这里我们已经完成了第0步,如果加上安装node那些,这里已经由半小时了吧哈哈哈。后面还要,,,放张图,你懂我的意思吧
##三、下载hexo中的hueman主题
博客换成hueman主题
hueman主题是hexo上百种主题的一种,可以挑你喜欢的风格,不同风格对应的功能也不一样,很多要后期自己配置,此处放hexo各种主题备选
很多博主都选用了NexT主题,功能很强大,不过风格我不大喜欢,看到一位小姐姐visugar和一位帅小哥的博客时眼前一亮,简单清晰,想找的内容第一眼就能看到,就它hueman了!
在你创建的文件夹(即根目录)下,从hexo的github上git下载hueman主题,以下指令会自动下载到你的themes文件夹中,注意别整错位置了。
git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman
在根目录下的_config.yml文件中修改theme,默认是landscape,就是你第一次打开的主题。修改为:
theme: hueman
修改完,浏览器里就直接变了??年轻!先保存,然后:
hexo c
hexo g
hexo s
再次刷新浏览器,才能看到新主题。是的,现在我们完成了第1步。
四、hueman主题基本修改+域名解析
1、hueman修改logo、副标题和网站icon等
- logo:对应那个“hueman”图片,图片位置\myblog(根目录,你创建的那个)\themes\hueman\source\css\images\logo-header.png 替换文件名
- 副标题(subtitle): Do what u love, love what u do:\myblog_config.yml 在config文件中找到相应位置,添加内容,另外注意:冒号后面有一个空格,否则会报错
- 网站icon: 打开网址时浏览器标题栏里的小图标\themes\hueman\source\css\images,icon文件添加到这个文件夹中,并在hueman的config文件中找到这一行
favicon: css/images/favicon.ico # path to favicon
,附两个生成icon的网址,很好用:生成icon和icon库 - title:打开网址时浏览器标题栏里的内容 \myblog_config.yml,就在开头很好找。
域名解析
这里就要用到最开始说的那一步了–github,截至目前,你的网站已经可以在本地运行,并且作了基本修改,那么下一个就是把这个网站放到网上,别人可以通过浏览器上网访问你的博客。
**[原理图]**是这样的: (1)别人在浏览器里输入网址(域名,需要购买,1块钱!!)–>(2)浏览器解析这个域名对应到服务器A处–>(3)A服务器将存好的页面展示出来,OK √
现在(3)中的页面内容已经有了初始化,本地服务器hexo也有了,但是不能联网,所以将hexo托管到github,由github充当服务器A的角色,在域名中解析你的github的ip地址。
现在要做的事:(a)github创建仓库4o4NotFoundd.github.io(见一,用你自己的github用户名)–>(b)本地hexo部署到github–>©购买域名,添加解析–>(d)调试结果
-
(a)创建仓库,ssh验证
在本地git.bash中:
git config --global user.name "你的用户名,我的是4o4NotFoundd"
git config --global user.email "注册时使用的邮箱"
生成ssh(ssh是一种通信方式,让你的本地git和github正常通信,能上传到github)
ssh-keygen -t rsa -C "你的邮箱"
这一步会在你的电脑上生成一个带“pub”字样的公钥和一个私钥,把公钥复制添加到你仓库(Setting那里)的ssh key中。
验证:ssh -T git@github.com
-
(b)本地hexo部署到github
根目录下的congfig文件中加上:
deploy: type: git repo: git@github.com:4o4NotFoundd/4o4NotFoundd.github.io.git branch: master #使用git@方式,每次从hexo向github部署的时候不用重复输入密码
[注意:]一定要使用git@,别用http协议的,不然每次部署时输入username和password能气死,来自http用户的血泪教训。
config配置完了,记得操作:
hexo c
清理
hexo g
如果有报错,修改后继续hexo c, hexo g
hexo d
此处使用hexo deploy(部署,提交到github) -
(c)购买域名,在域名中添加解析
到(b)这里,在浏览器里输入https://你的用户名.github.io
已经可以看到网站了,但是,这个网址不大好看啊,自己申请一个简单好记的域名岂不美滋滋?
于是,在万网找到"域名优惠”字样,发现了新大陆,一块钱域名,不亏了吧,其他9元,19都有,看个人。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hE0zuocO-1576073094254)(https://ftp.bmp.ovh/imgs/2019/12/877e5ab5b74ef65f.png)]
进入到控制台,添加解析如下:
红圈里的是github的解析,上面两个是添加到百度站点(添加之后百度就会爬你的网页,别人搜东西就会把你的推荐给人家,不然别人一直看不到你的博客,具体搜SEO)
github的记录值哪来的? 在你的本机ping https://4o4NotFoundd.github.io
就出来了,这个ip就是“服务器A”的ip。
对了,在购买域名的时候还有身份认证,有一个快捷的方法,用淘宝或支付宝这样的认证很快,不然你得几个工作日。 -
(d)不出意外,当你在浏览器里输入域名,就能看到你的网站了!!!开不开心??这是第2步!!!
五、开始写第一个博客
两种方法:hexo-admin 和 自选编辑器(我用的webstorm,sublime text3也可以),两种都是编辑markdown(.md)格式的文档。
(1)hexo-admin使用过程:
npm install --save hexo-admin
hexo s
在浏览器里输入localhost:4000/admin
进入到编辑页面,对新手友好一些。
(2)自己用编辑器写(推荐)
主要是写.md文件,hexo会把.md文件转成html页面,博主只需要关注内容就好,不用太关心页面布局。
在/myblog/source/_posts文件夹下的md文件会最终展示在博客上,,所以可以直接在里面新建filename.md文件来测试,格式如下
title: Vue.js之vuex入门
author: He Zhaoxiang
id: learn-vuex
tags:
- Vuex
categories:
- web前端
- Vue学习
date: 2019-12-04 19:11:30
---
虚线一下是正文
![](https://图片链接.png)
## 一、这是一级目录
- id是在链接里展示的内容
- tags是文章的标签,在侧边栏能展示
- categories 是menu菜单栏,分别是一级菜单“web前端”,二级下拉菜单“vue学习”
- 插入图片的格式就是上面那样,试一次就知道了。
最后,hexo c, heox g -d部署到github,就成了~ 哈哈哈第3步get~
有了以上三步,完全可以写博客了,那为什么还有下面4,5,6。。。步呢,当然是做的更好啦~
##六、博客menu菜单栏、侧边展开定制
1、menu菜单栏增加内容
最方便的方式是通过category添加,在写.md的时候就自己确定了在哪个分类下,比较方便。所以,用好上面我给的模板,剩下的就是你自己的内容了。
在category中不同一级菜单的顺序,是按字母和拼音的先后来的,不是依次向右排,也没有自己定制位置的方法,所以最好先自己规划好一级分类。
侧边栏在hueman的config文件中是widgets,展示的内容自己选吧,相应的汉语意思在/hueman/languages/zh-CN.yml中
这里是我设置情况:
七、字数统计、访问量统计、评论系统 百度和谷歌收录SEO
1、字数统计
在根目录下安装hexo-wordcount:
npm install --save hexo-wordcount
config中counter选择true,没错,就是这么简单,但是自己捣鼓就很费时间,多数博客都是基于NexT主题改的,hueman主题的博客比较少。
2、访问量统计
使用不蒜子,参考这位小哥需要一提的是小哥给的代码失效了,进入不蒜子那里直接获得最新代码,就两行代码,引用一下不蒜子的js就可以。
3、评论系统,百度收录SEO
评论使用来必力,百度收录也是参照这位小姐姐,需要“科学上网”,如果不能“科学上网”,那就得花些时间使用valine方法了。
到此,第四步finish!
后续可以改的东西还很多,有很大的可定制性,先到这里,有问题可以Email我或者留言,看到会及时回复滴~
欢迎经常来玩哦~