这篇文章主要介绍如何从零开始搭建我们的个人博客网站。搞技术写博客是必不可少的,也许你喜欢在CSDN上写你的博客、或者简书、掘金等等平台,但如果再加上我们的个人博客网站,那肯定是锦上添花。我用的
nginx
服务器和hexo
博客框架,hexo
是一个很好、很轻量级的博客框架,适合个人写写博客日记等。搭建完成后,我们只需专注于写好我们的markdown文件,服务器那边会自动去渲染页面,很nice!完完全全的从零开始,博主已经把坑都走完了,来,上车!
前奏——在你的服务器上安装nginx和hexo
我们已经买了服务器,但是通过域名也访问不了它,我们还需借助
nginx
这个web服务器,这样我们就可以直接通过域名访问它了,先安装一下nginx
服务器。
在此之前,我们要用一个软件去连接我们的服务器终端,我比较推荐
putty
这个软件,它很小,只要800k,下载不用安装直接就可以用了,附上下载地址 putty 打开输入我们的服务器ip就可以了,然后再终端输入root和密码就可以登进去了。
CentOS 7安装nginx
先下载相关包依赖
1
2yum -y install gcc gcc-c++ autoconf automake libtool make cmake
yum -y install zlib zlib-devel openssl openssl-devel pcre-devel切换到一个目录,比如我的是
/root/download
下,下载解压并编译安装nginx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15在root目录下创建一个文件夹download,以后下载的东西就存在这个文件夹下面
mkdir download
切换到下载的目录
cd download/
下载压缩包
wget http://nginx.org/download/nginx-1.15.7.tar.gz
解压
tar -zxvf nginx-1.15.7.tar.gz
进入nginx目录
cd nginx-1.15.7
下面三个指令都是安装,具体什么意思也比太明白,反正这样安装就可以使用SSL解析了
第两个指令执行起来都很炫酷,哈哈
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre
make
make install默认会安装到
/usr/local/nginx/
下,下面是常用的命令还有一件很重要的事情就是我们阿里云服务器的80端口开放一下,不然怎么搞也出不来,这是个坑。
1
2
3
4
5
6
7
8
9
10启动nginx服务
/usr/local/nginx/sbin/nginx
暂停nginx服务
/usr/local/nginx/sbin/nginx -s stop
重启nginx服务
/usr/local/nginx/sbin/nginx -s reload
查看nginx版本信息
/usr/local/nginx/sbin/nginx -v
测试配置文件是否正常
/usr/local/nginx/sbin/nginx -t如果出现80端口被占用,执行netstat -lnp|grep 80来找到占用80端口的进程,并kill它,如下:
1
2
3
4
5
6
7
8[root@instance-uc9mvl4p nginx]# netstat -lnp|grep 80
tcp6 0 0 :::80 :::* LISTEN 4505/node
udp 0 0 0.0.0.0:68 0.0.0.0:* 805/dhclient
[root@instance-uc9mvl4p nginx]# kill 4505
[root@instance-uc9mvl4p nginx]# netstat -lnp|grep 80
udp 0 0 0.0.0.0:68 0.0.0.0:* 805/dhclient
[root@instance-uc9mvl4p nginx]# /usr/local/nginx/sbin/nginx
[root@instance-uc9mvl4p nginx]#其中测试
nginx
配置是否正常在安装SSL
中会用到,如果配置文件正常的话会出现下面的信息:1
2
3[root@iZbp1b44670a4o3ks27kznZ nginx]# sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful安装完成后需要配置
nginx
服务器,配置文件在nginx
下的conf
目录中的nginx.conf
,就是上面那个测试配置文件是否正常指令后输出的第一句话里面那个is ok的文件。我们需要把它第二行注释去掉,把user后面改为root,把http server的server_name后面改为我们的域名,location / 下的root后路径改为我们页面的public路径。具体如下代码:1
2
3前几行
user root;
worker_processes 1;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18http的server
server {
listen 80;
#我的域名为www.gaosong.site
server_name www.gaosong.site;
location / {
#我的博客的公共目录是/root/blog/public
root /root/blog/public;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
这样就配置好了nginx
,最后最后关键的一步,一定一定一定要重启nginx,不然我们访问我们的域名界面还是welcome to nginx。
重启之后我们在浏览器输入域名就能访问到我们的博客主页了。
ok,nginx服务器已经搭好了,下面我们要开始
hexo
的安装使用了,但是在这之前,还得装一下git
和nodejs
这两个东西,很简单的操作。
CentOS 7安装nodejs
1 | 在root下进入download目录下 |
CentOS 7安装git
1 | yum install git |
上面确实很简单,让我们开始建
hexo
这个博客框架吧。
CentOS 7安装hexo并初始化
1 | 安装hexo脚手架 |
最后去配置一下nginx
服务器并重启一下就可以访问了。
间奏——配置hexo并教你在hexo上面写文章
hexo已经装成功了,我们也可以通过域名访问到我们的博客网站了,但是见面好像有点奇怪,我们也不会用这个玩意,下面我们来配置一下它,并学会用它写我们的博客吧,坚持住,兄弟!
Hexo博客常用配置及命令
常用命令
1 | 创建新的页面,xxx填入我们的标题,会创建对应的xxx.md文件,hexo会帮我们自动转换成html代码显示在博客网站上 |
hexo博客的项目配置文件在我们的blog主目录下的 _config.yml
文件,用vim打开并进行简单的配置
1 | # Site |
hexo博客安装启用Next主题
下载主题
1 | cd blog #cd到我们的博客主文件夹中 |
启用主题
1 | vim _config.yml #vim打开hexo博客的配置文件 |
侧边栏配置
1 | 先打开主题配置文件 |
1 | menu: |
配置关于页面
1 | 创建一个新页面--“about”,注意是页面,不是博客md文章 |
1 | --- |
1 | 生成页面 |
配置标签页面
1 | 创建一个新页面--“tags” |
打开文件把第二行title的值修改为标签,并在date后面添加一行:type: tags
为什么要添加这一行?如果不添加这一行的话,它将不会自动显示我们的文章标签
1 |
|
1 | 生成页面 |
配置分类页面
1 | 创建一个新页面--"categories" |
打开文件把第二行title的值修改为标签,并在date后面添加一行:type: categories
1 | --- |
1 | 生成页面 |
怎样在我们创建的博客中使用标签与分类?
我们每创建一篇博客,当我们用vim打开,它的顶部会有一些title、date、tags等信息,这就是使用的方法。
1 | 创建一个测试博客md文件 |
1 | --- |
如上面所示,标签tags后面我们设置两个标签,分类categories后面分到了Java。看一下实际效果图
但是还有一个小问题,就是我们每次创建新的博客文章的时候,它顶部默认不会有categories这一项,我们要自己去主动写,能不能每次创建后它自动就有呢?
答案是可以的,我们可以修改默认的post模板文件即可。
1 | 他就在我们的博客主目录下的scaffolds/post.md |
1 | --- |
把模板修改成这个样子就可以了!
添加我们的友链
侧栏最下面显示我们的Github或者CSDN账号这些社交账号,会让访客对我们有更深入地了解等,这个感觉还是挺好的。它直接在我们的主题配置文件里面配置就可以了,先用vim打开, vim themes/next/_config.yml
,再搜索 social
关键词,把注释去掉并做如下配置,我就填写我自己的网址了,小伙伴可以根据自身情况修改
1 | social: |
CSDN那一行是我自己手动添加的,后面的book是图标样式
解决一下文章太长页面不美观的问题
如果我们博客的文章太长,那么它会在我们的网站主页上显示过长,影响用户体验,所以我们还得学会让那些长的博客显示个开头,再来个阅读全文的提示,提升用户体验。
其实很简单,我能只需要在我们要截断的markdown文件内部添加一行即可,它就会截断,上面的博客会显示,下面的会给用户提示阅读全文。
1 | <!--more--> |
就是这一行,我们做一下测试,创建一篇博客,并在里面写入文字,在中间添加上面那一行。
删除博客
可能我们创建错了,或者别的原因,肯定会需要删除我们已经创建的博客文章,怎么做呢?
这个应该挺简单的,我们其实只需要把我们写的Markdown文件删除即可,这些文件默认放在我们的博客主目录下的 source/_post/ 下面,我们只需要执行 rm -rf xxx.md
就可以了,然后记得 hexo g
一下,刷新我们的网站就可以看到已经没有了我们删除那篇博客了。
小伙伴们如果还能看见的话,可以 先hexo clean
一下,清一下缓存什么的,在重新生成一下页面。
解决博客中插入图片问题
写博客肯定需要插一些图片进去,由于hexo比较轻量级,没有后台管理界面,我们需要通过一个插件来完成插入图片的功能。
对了,还有一件事,就是我们可以用 PuTTY 这个软件来连接我们的服务器,进行一些操作,但是如果我们要向服务器里面上传一些文件,如图片等,我们需要借助另外一个软件—WinSCP,下载之后输入我们的服务器ip和用户名及密码登录进去,就可以看到我们服务器的所有文件了。可以在我们本机电脑上,把图片拖拽到服务器中。
设置站点配置文件的
post_asset_folder: false
改为 true1
vim _config.yml
1
2# 表示我们每创建一篇博客时会同时在_post文件夹下面创建一个同名的文件夹
post_asset_folder: true安装插件
1
npm install https://github.com/CodeFalling/hexo-asset-image -- save
创建一篇新的博客–图片测试
hexo n 图片测试
,它会在source/_post/下面也会有一个图片测试的文件夹,我们通过WinSCP软件把一张图片传进去,名字最好写的简单点,就比如 1.png
把这张图片传入进去之后,我们在 图片测试.md 中插入图片地址直接写1.png 就可以了!如下面我写的
1 |
|
这样的话我们以后通过markdown编辑器写完博客后,记得要把图片传到同名的那个文件夹里面,然后图片地址直接写成 1.png 、2.jpg 等等什么的就可以了!
添加评论功能
参考我的另一篇博客:hexo的next主题添加评论
添加搜索功能
网站添加搜索功能很有利于我们查找我们以前写过的博客文章等,这样无论对用户还是我们自己都是很友好的。
先下载一个插件
1 | npm install hexo-generator-searchdb --save |
打开hexo站点配置文件 vim _config.yml
,在文章末尾添加如下几行
1 | # 搜索功能 |
再打开主题配置文件 vim themes/next/_config.yml
,搜索 local_search
,后面设置为true,启用搜索功能
设置网站的图标Favicon
先把我们自己要设置的图标图片用WinSCP传到服务器博客目录下 themes/next/source/images/
目录下,我的名字为 icon.png,打开主题配置文件 vim themes/next/_config.yml
搜索 favicon
后面那些跟上我们向 images
和它目录下的图片名称,配置完成后重新生成一下页面即可 hexo g
1 | favicon: |
尾奏——博客网站的美化(直接开花)
恭喜坚持过来,现在我们已经会用
hexo
写文章了,但是网站有一说一,有点太素了,下面我们会讲一些简单的美化,只能算是入门吧,博主也只是个小白,也并不会美化的多么好看,但足够我们入门了。还有一点就是博客网站是让我们来写博客的,我们一定不能忘记了它的本质作用呀!
鼠标点击特效
1 | cd到next主题的js代码src中 |
1 | !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document); |
注意一点就是复制过去的话,我这边不知道什么原因,开头会缺少 !functio,小伙伴们注意看一下,开头如果缺少点单词,我们自己注意补上。我找了半天才发现这个原因!
1 | cd到next目录下 |
1 | <!-- 页面点击小红心 --> |
这样就可以了,我们cd到主目录下,然后hexo g生成一下
侧栏显示头像
首先我们把我们的头像图片文件传到服务器里面,放在博客下的 /themes/next/source/images/ 下面,我放的是 gs.png ,然后打开主题配置文件 vim themes/next/_config.yml
,搜索 avatar
,改为如下
1 | # Sidebar Avatar |
上面的那些注释不用管,注意avatar后面的设置,我的是gs.png。
这样就可以了,但是默认是正方形的,有点难看,如果想变成圆形的接着看下面的。
1 | vim打开头像的css代码块,后面添加border-raduis为50%即可 |
打开第一个类 .site-author-image 就是头像框的类,我们把css代码设置成如下就行,其实就是在后面添加border-raduis为50%。
1 | .site-author-image { |
记得清一下缓存 hexo clean
,再重新生成一下博客 hexo g
。
博客底部美化
删除Hexo和Next的友链
默认博客底部会显示这些东西,感觉有点多余,我们可以通过修改主题配置文件来不让这个友链显示,打开主题配置文件 # vim themes/next/_config.yml
,搜索 powered ,把三个 true
全部改为 false
,重新生成页面就可以了。
1 | powered: false |
底部增加人数与阅读量
编辑主题配置文件 vim themes/next/_config.yml
,搜索 busuanzi_count
,做如下配置
1 | busuanzi_count: |
还要去修改一下一个html文件代码,因为默认那个不蒜子域名不对,更换成别的域名了。
1 | 打开这个html文件 |
找到第三行的那个 <script>xx</script>
代码块,如下
1 | <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> |
修改成下面的代码块
1 | <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> |
这样的话,网站下面就会有 本站访问数 x 人 和 本站总访问量 x 次,还会在每一篇博客上面显示阅读量。
重新生成一下网站就可以看到了,效果如下所示
代码块美化
改变代码块背景颜色
默认代码块背景颜色为白色,我们也可以把它设置为暗黑色等,它也可以在主题的配置文件下面设置。
打开主题配置文件 vim themes/next/_config.yml
,搜索 highlight_theme
,默认为normal,还有night等,小伙伴们可以都试一试,记得改完之后,要清一下缓存 hexo clean
,再重新生成一下 hexo g
1 | # Code Highlight theme |
增加一个代码块复制的按钮
改变博客内链接的样式
我们写博客内默认的链接样式,说实话,有点丑,我们可以将它修改一下,变得好看一些。
修改文件 themes\next\source\css\_common\components\post\post.styl
,在末尾添加如下css样式,:
1 | // 文章内链接文本样式 |
颜色可以自定义,记得清一下缓存 hexo clean
和重新生成一下页面 hexo g
添加字数统计及阅读时长
先在博客根目录安装一个插件
1 | npm install hexo-wordcount --save |
打开主题配置文件 vim themes/next/_config.yml
,搜索 post_wordcount
,按如下设置
1 | post_wordcount: |
这样其实就可以了,每篇博客最上面都会显示一下字数统计和阅读时长
网站最下面也会显示博客总字数,但是这个是英文的,底部基本上都是中文,这样不太美观,我们可以通过下面的操作自定义显示的文字,先看一下效果
先打开底部模板html文件, vim themes/next/layout/_partials/footer.swig
,搜索 post-meta-item-text
,这是一个span标签,原来是这样的
1 | <span class="post-meta-item-text">{{ __('post.totalcount') }}:</span> |
我们把它里面内容改成如下
1 | <span class="post-meta-item-text">博客全站总字数 </span> |
再看一下这个文件,这个span后面还有个span标签,有个title属性为 post.totalcount
,我们在这个span的结束标签后面新增加一行,再写入一个span标签,对应网站上就是为了显示 字 这个字,新添加的span标签如下
1 | <span class="post-meta-item-text"> 字</span> |
为了让小伙伴们能看清楚添加的位置,我放一张截图上来
最后还是老样子,记得清一下缓存和重新生成一下页面即可
添加顶部加载条
先看一下效果图
具体实现方法
打开 /themes/next/layout/_partials/head.swig
文件,添加红框上的代码,就是第三行后面,我们新插入一行,添加如下代码
1 | <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> |
但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig
文件中添加如下代码,接在我们刚添加的两行代码后面
1 | <style> |
设置背景图片
我们可以通过简单的html、css代码为网站设置背景图片,这个取决于我们个人吧,设置了背景图片的话,网站的响应时间肯定会增大,影响用户体验。这里也写一下吧。
首先通过WinSCP向博客目录下 /theme/next/source/images/
目录下传入我们的背景图片,暂且为它起个名字– bg.jpg
,打开配置的css文件, vim themes/next/source/css/_custom/custom.styl
,在最后面添加下面一段代码
1 | //背景图片 |
清除一下缓存,重新生成一下网站即可,要做好等待一段时间的准备,这个还是挺影响用户体验的!
到此应该结束了,谢谢您的阅读,这个过程可能会出现很多问题,但不用怕,多多百度,去上网查看问题并解决它们,既能提升我们的满足感,也会学到不少东西,人生本来就不是一条直线,加油吧兄弟!这上面如果出现了错误,或者小伙伴们有解决不掉的问题,欢迎与博主沟通交流,一起进步,关于界面有我的联系方式。