
豪横!程序员搭个人博客,一个 GitHub 账号足矣!
作为程序员拥有一个属于自己的个人技术博客,绝对是百利无一害的事,不仅方便出门装b,面试时亮出博客地址也会让面试官对你的好感度倍增。经常能在很多大佬的技术文章的文末,看到这样一句话:“欢迎大家访问我的博客”,每每看到这都会觉得好酷,同样是搞技术为啥人家那么优秀。而自己想要建一个博客,要么怕花钱,要么怕过程太麻烦,最后就不了了之。
应粉丝要求,今天手把手的教大家搭建一个属于自己的技术博客,只要你有个github
地址就行!还等啥呢?骚年,开整吧!
一、Hexo是个啥?
Hexo今天的主角,它是一款基于Node.js
的静态博客(无需与后台交互,全由静态页面组成)框架,依赖少易于安装简单,更主要的是它免费啊,而且可以轻松的将生成的静态网页托管在GitHub
,码云
和Coding
上,搭建博客首选框架之一。
二、准备工作
1、git安装
git
下载地址:https://gitforwindows.org
安装完成后,检查git是否安装成功,如下显示即为成功。
注意: 这里建议下边使用的所有命令,均在git
命令行中执行,cmd
中执行命令容易出现错误。
2、node.js安装
node.js
下载地址:https://nodejs.org/en/
,选择稳定版本即可,node.js
的安装非常简单,一步一步next即可。
安装完检查node
是否安装成功,如下显示即为成功。
三、Hexo 本地搭建
在你自己觉得最可爱
的磁盘里,建一个文件夹专门用来存 myblog
博客相关的文件。 文件夹内右键打开 Git Bash Here
,在此窗口内执行以下所有命令。
1、安装 Hexo
用npm
安装hexo
,由于国内网络高“墙”深院,避免安装缓慢或失败,这里切换阿里的NPM
镜像,没办法只能采用迂回战术了。
用 cnpm
安装 hexo
安装可能有一些缓慢,当然这还是取决于你的带宽,这个过程中会出现的WARN
提示不用理会。
到这hexo
就安装好了,检查一下hexo -v
是否安装成功
2、初始化 Hexo
Hexo
安装完以后需要进行初始化操作。
注意:这时需要在myblog
文件中,创建一个新的文件夹用来存放hexo
博客文件。否则执行hexo init
命令会报错。
进入hexo文件
夹内右键打开 Git Bash Here
,在此窗口内执行后边的所有命令。
初始化成功后,hexo文件
夹内会出现如下的文件:
node_modules
: 依赖包public
:存放生成的页面scaffolds
:生成文章的一些模板source
:用来存放你的文章themes
:放下下载的主题_config.yml:
博客的核心配置文件(设置主体、标题等属性)
接着需要执行一下cnpm install
命令,要不下边的启动会提示命令不合法。
最后用 hexo s -g
命令来启动安装好的 hexo
。
直接访问http://localhost:4000
显示如下页面,本地博客搭建成功。
四、Hexo 托管至 GitHub
1、创建GitHub仓库
这时候需要我们在GitHub
上创建一个仓库,设置仓库的名字以XXX.github.io
结尾
2、配置_config.yml
文件
修改_config.yml
文件,添加你创建的GitHub
仓库地址
安装部署命令deploy-git
,这样你才能用命令部署到GitHub
。
上边修改完毕以后,依次执行以下命令,提交本地hexo
文件到GitHub
。
3、线上测试
访问刚创建的仓库:https://chengxy-nds.github.io/
,文件推送至GitHub后页面显示会有一定的延迟,稍等几十秒再次刷新页面,看到下边这些页面就表示博客部署成功。
4、设置个人域名
现在我们的博客地址:https://chengxy-nds.github.io/
,但是看着是不是觉得有点low,如果有钱自己可以买一个域名。在云平台随便买一个,看自己喜好,例如:chengxy.com。
将域名指向GitHub
的服务器地址, 192.30.252.153
和 192.30.252.154
。
进入存放博客的GitHub
仓库,点击settings
,设置Custom domain
,输入域名chengxy.com
然后在本地博客文件source
中创建一个名为CNAME
文件,不要后缀。写上你的域名。
最后重新编译上传文件,访问:chengxy.com
即可。
五、Hexo主题切换
虽然我们的博客搭建完成,但大家肯定也发现,现有的博客样式丑爆了,这时候就需要到官网挑一个自己喜欢的风格了。
1、下载主题
hexo
主体官网:https://hexo.io/themes/
,我们随便找一个主题替换演示一下,主题都托管在github上,直接clone就好。
2、配置_config.yml
可以看到hexo
只有一个默认的主题theme
,现在进入theme
文件夹执行git
克隆命令,或者直接下载一个主题放入theme
文件夹内都可以。
修改_config.yml
文件中的theme
属性
打包上传看看效果:
3、测试
nice!主题已经替换成功,是比自带的好卡不少
六、Hexo基本操作
博客搭建完,接下来就要开始写博客,管理博客了~
创建我们的第一篇博客,会在source\_posts
目录下生成一个程序员内点事的第一篇博客.md
文件
hexo基本配置
_config.yml
是hexo
框架最核心的文件,博客的配置基本在这里。
总结
至此,我们整个hexo
博客就搭建完了,其实还是比较简单的,但到这里我们万里长征也只是走了第一步,后续还有更细致的操作,例如:博客建分类、标签、布局等,让我们的博客变得美美哒!
文章转载自公众号:程序员小富
