快速搭建个人博客——保姆级教程 下

简介: 快速搭建个人博客——保姆级教程

正式上线

图床

这是个ma玩意啊???不要慌,大家不是看咱们默认主题的网站一点儿都不好看么,那是因为没图片啊,你要是给它换上一套配图,优化一下,是不是就好多了呢?那在网络中我们引用图片一种是本地上传,代码里放上路径引用;另一种则是通过网址,显然后者更方便(如果类比到后面要用到的服务器上,随着图片量日渐增多、存储空间慢慢减少,每次发文都需要连同图片一起上传,那得占用多大的空间呐)

然而,如果我们自己有一个地方,能把本地图片转换成链接(人人通过这个链接都能访问到你发布的照片)是不是就很棒了nie。Picgo和一些其他插件就能实现

前些时候更新过一片文章,使用GitHubSM.MS。如果有不能类比操作的朋友,>看这里<由于GitHub毕竟是国外的,访问速度上会有点儿慢,SM.MS倒是一个运行了很久的老牌子了,但它俩在访问速度上都略慢

杰森强烈推荐国内的码云(Gitee),配合Picgo使用。稳定、快速,还不容易丢失。(ps:此处就会有些朋友问了,我公开了我的仓库,里面全放的是我的照片,会不会隐私存在隐私泄露什么的)对于这类问题,我只能说

谁天天闲的没事去看你仓库啊??再者说,你能上传到仓库里XXX(自行想象)照片么??所以说,放心用,不要想辣么多真的是

另外,友情提示:Gitee对免费版账户存储容量最大为5G,仓库满了记得从软件中改下路径,使用后不要乱改自己Gitee账户的名称(不是昵称,英文那个名称),不然就等404吧

Butterfly配置

直接放上官方文档,朋友们可以先配置一下,非常简单。你看到的页面可能是繁体中文,不要用浏览器自带的翻译引擎(可能翻译后,部分内容不显示)贴心的作者,早已想到了,我们只要在网站右下角设置中切换一下就好

杰森在后面会专门出一期,来讲下主题配置中的一些问题,相信看到这里的小伙伴已经迫不及待想要把自己的网站发不到网上了吧,我们重点讲这个问题

GitHub Pages配置

GitHub Pages是一种由GitHub中的仓库/项目直接创建的网页。管理简单,在本地编辑仓库中的内容,上传到GitHub上,GitHub Pages就能快速完成更新,重点是不花钱,不花钱,不花钱

新建仓库,填写内容如下,特别注意红框位置

保证仓库public,名称填写正确用户名.github.io,系统自动变更为Pages

在仓库设置中找到Pages

记住仓库地址,我们会将本地的文件上传到仓库

如果你是在电脑上第一次使用git,请先配置SSH公钥(一种安全协议,你可以理解为登陆某网站需要的验证码)

WebStorm中链接到远程,添加仓库地址,这里不是发布网站需要的仓库(非“用户名”+github.io仓库,新建一个,为了管理本地代码)

因为这里都是基本的git命令,前面也提到过,不清楚的小伙伴可以看这个专栏里的资料,都是一些基础操作,非常容易上手

修改网站部署设置

在网站本地根目录下打开 git bash here 依次执行以下命令

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览
hexo d //部署项目

执行完毕后,所有人就能通过你的用户名+github.io这个域名访问你的网站了。到这儿,我们就成功上线了自己的网站

如果感觉GitHub访问速度慢(嗯,其实就是慢,还会有打不开的情况)可以部署到Gitee,都是一样的操作,还是中文,不要太简单ei

额,发布确实是发布了,那你觉得像用户名+github.io这样的名称方便记忆吗??我想,如果是一个新手(可能都不知道GitHub是什么的用户,肯定是很困难了)

那,怎么样方便记忆,而且足够个性化呢?

当然,这部分肯定是不免费的了,哪儿有什么都白嫖的道理呢?对吧,推荐在阿里云腾讯云完成下面的操作哦,如果你使用其他的平台,不是不行,但是建议购买域名和服务器都在相同的平台,方便管理

国内的大厂,都有保障,无脑冲就可以啦。从经济性角度来看,哪个有活动,更实惠就选哪个,杰森是看到了阿里云当时的活动比腾讯云更实惠,so~~

服务器选购攻略

收到有些朋友反应:那么多入口,都找不到从哪里买/找不到活动入口。这里讲下怎么查看最新的活动,平台会有哪些优惠,入口在哪里

阿里云

学生专享

账号中心完成学生认证购买更优惠

活动专享

最新活动 >戳我直达<

腾讯云

不得不说,两家界面基本一致,熟悉一个就行,所以位置差不多都一样

学生专享

学生党查看这里 >戳我直达<

活动专享

最新活动 >戳我直达<

域名

域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)

由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点,人们设计出了域名,并通过网域名称系统(DNS,Domain Name System)来将域名和IP地址相互映射,使人更方便地访问互联网,而不用去记住能够被机器直接读取的IP地址数串

如果你没有看懂,没关系,那听杰森细细道来。简单来说,在公网上访问的资源都有其固定地址IP,但是如果你要访问特定的IP,就需要记住它。但是呢,它不方便记忆,人们就想出了域名这东西

IP起了一个个性化的名称,比如攻城狮杰森是全称,朋友们喊我森森、阿森、小森,都是别名,但都指向“攻城狮杰森”这个人。那在网络中如何实现起别名呢?这里介绍下DNS,它是互联网中的一项服务,实域名IP的相互映射,也就是说,你输入域名访问的就是域名所对应的IP地址

购买

既然理解了什么是域名,那我们先来买个域名吧!

>点击此处< 查询你想要的域名

举个栗子,输入后查询,选好后加入清单,付款购买即可。不同的后缀价格不同,凭个人喜好

域名后缀,亦被称为顶级域名,是指代表一个域名类型的符号。 不同后缀的域名有不同的含义。域名共分为两类:国别域名(ccTLD),例如中国的.cn、美国的.us、俄罗斯的.ru、以及国际通用域名(gTLD),例如.com、.xyz、.top、.wang、pub、.xin、.net等1000多种,所有域名后缀作用无差异,仅外观和本身含义不同,但只有少数例如举例中的域名后缀可以在国内支持网站的备案

更多域名后缀信息,查看这里

DNS解析

添加域名

因为我们现在已经有了用户名.github.io这样一个网站,为了简单易记,我们将“用户名.github.io“解析”到所购买的域名,这样,网站就有了所有域名username.github.io两个网址了

打开仓库,找到设置,进入pages设置,添加域名

你还可以使用免费的强制HTTPS

HTTPS (全称:Hyper Text Transfer Protocol over SecureSocket Layer),是以安全为目标的 HTTP 通道,在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性

HTTPS 在HTTP 的基础下加入SSL,HTTPS 的安全基础是 SSL【SSL(Secure Sockets Layer 安全套接字协议),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层与应用层之间对网络连接进行加密】

因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层(在 HTTP与 TCP 之间)。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯,例如交易支付等方面

打开这个选项

添加解析记录

阿里云官网进入域名控制台

若没有,在此处搜索

找到需要与username.github.io绑定的域名,点击“解析”

进入后,点击“添加记录”,需添加两次记录

第一次

第二次

DNS解析需要时间,稍等片刻后,若在浏览框中输入你的域名,正常访问则解析成功

这里为什么要说是正式上线呢,毕竟网站到了服务器看得才,才正规一点儿是吧,像GitHub Pages,倒是免费,但是在国内,DNS解析后需要时间,总会有无法访问或者断连的情况,太不方便

服务器

先来看看,服务器是何方神圣?

服务器是计算机的一种,它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机(如PC机、智能手机、ATM等终端甚至是火车系统等大型设备)提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性

根据服务器所提供的服务,一般来说服务器都具备承担响应服务请求、承担服务、保障服务的能力。服务器作为电子设备,其内部的结构十分的复杂,但与普通的计算机内部结构相差不大,如:cpu、硬盘、内存,系统、系统总线等

简单理解:一台不断电,有空间的主题在“天上(云端)”一直在为你放置(部署)上去的资源而服务,能处理各种请求(比如你在导航栏输入域名访问网站)

有两种类型的服务器国内国外的,根据我国法律规定,中国大陆的网站需要备案,等待的时间可能会长一点。国外的到时不需要备案,但是稳定性和访问速度就不敢保证了,各位小伙伴自己衡量,杰森用的是阿里云的轻应用服务器部署的个人博客网站

购买

这是我的服务器配置,大家可以参考下

如果你是初学者,这个入门级的配置已经足够学生机,可免费领取,具体规则详见社区 >戳我直达<

开发者->成长计划

学生专享(体验后即可得到半月免费ECS服务器,社区内发表使用感受(发一篇博客)可免费续费两月),具体规则请查看官网

账号中心->基本信息位置完成学生认证即可

最新活动 位置购买优惠力度会更大

部署

密码设定

在图示位置出更改远程连接密码,保存好

虽然可以用浏览器远程连接,但是并不建议,因为有一些键盘上的快捷键会被系统误认为是对浏览器的操作,而不是对话框

远程连接

为避免这样的问题出现,我们选择使用第三方工具Putty,具体操作步骤,阿里云的帮助文档已经非常详细,这里不再重复

从这里开始看,根据提示完成操作

启动Putty工具,链接服务器,登陆用户名为root,密码就是在服务器位置设置的密码(Linux操作系统中输入密码为了安全不显示,不必担心)出现以下界面时,说明配置正常,继续下一步即可

git配置

1.输入命令,安装git

yum install git

中途如果暂停,则根据提示输入 yes / y / Y,表示继续安装,知道最后出现complete表示安装成功

2.创建git账户

adduser git

3.添加git账户权限

chmod 740 /etc/sudoers
vim /etc/sudoers

4.执行最后一条命令后,点击键盘i键进入编辑模式,找到图示位置代码

在下面加入一行

git     ALL=(ALL)     ALL

按 Esc键并输入 :wq(含义:保存后退出)

5.回改权限

chmod 400 /etc/sudoers

6.设置git账户密码

sudo passwd git

输入命令回车后连续输入两次密码即可(不显示,正常),出现图示即成功

7.切换至git账户

su git

创建 ~/.ssh 和 ~/.ssh/authorized_keys 文件

mkdir ~/.ssh
vim ~/.ssh/authorized_keys

点击键盘i键进入编辑模式,粘贴本地电脑生成的SSH公钥,文件位置如图

粘贴后,按 Esc键并输入 :wq(含义:保存后退出)

赋予权限

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

8.本地 git bash here 中测试是否免密登陆成功

ssh -v git@服务器公网IP

出现图示内容表示连接成功

9.服务器中创建仓库并完成配置

切换到root账户

sudo su root

创建repo仓库目录

mkdir /www/repo

赋予权限

chown -R git:git /www/repo
chmod -R 755 /www/repo

建立网站根目录hexo

mkdir /www/hexo

赋予权限

chown -R git:git /www/hexo
chmod -R 755 /www/hexo

新建空白的git仓库并初始化

cd /www/repo
git init --bare hexo.git

10.创建 Git 钩子,用于自动部署

vim /www/repo/hexo.git/hooks/post-receive

同上,进入编辑模式,粘贴下面代码并保存退出

#!/bin/bash
git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

修改权限

chown -R git:git /www/repo/hexo.git/hooks/post-receive
chmod +x /www/repo/hexo.git/hooks/post-receive

仓库建立完毕

安装Nginx

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务,其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

中途输入 y,表示继续安装(和上面一样)等待安装完成,会显示登陆网址和初始密码

注意红框位置,如果两个网址都无法访问,请在服务器安全组 / 防火墙中放行8888端口

输入初始账户名、密码登陆

进入后,搜索Nginx点击安装(我这里已经装过了)

网站–>添加站点,域名形式xxx.com 无需任何前缀

设置–>配置文件,修改红框内容

设置–>网站目录,修改为 /www/hexo 并保存

服务器终端,重启服务

service bt restart

至此,服务器端配置完成

Hexo配置修改

进入本地博客根目录,修改 _config.yml 文件部署位置

GitHub Pages 设定

服务器设置

源码如下

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: git@你的域名:/www/repo/hexo.git
  branch: master # 注意此处分支设定,需在仓库中选择默认的分支

打开Putty工具,连接服务器赋予权限

chown -R git:git /www/repo/
chown -R git:git /www/hexo/

本地根目录下打开 git bash here执行命令

hexo clean //清除缓存
hexo d -g //快速部署

出现图示内容表示部署成功,等到备案完成后就可以通过域名访问了

备案

杰森的网站也是最近才备案下来,所以如果你等不及,就另寻他路吧,在国内,咱可不敢造次啊啊啊

你会经历以下几个阶段

购买服务器后,绑定域名后系统会提示你没有备案,根据提示完成即可

ICP

英文全称:Internet Content Provider,中文全称:网络内容提供商

ICP可以理解为向广大用户提供互联网信息业务和增值业务的电信运营商,是经国家主管部门批准的正式运营企业或部门

联网备案

进入官网 在阿里云完成ICP备案后,系统也会提示你操作

部署完成后,选择联网备案登陆

提交网站所有人信息和一些基本材料等待审核通过,最后在网页底部插入代码即可,效果如图


到这里,你的个人网站就成功上线了,也部署到了服务器。内容会根据大家的反馈情况持续更新!!!

最后,放上杰森的小破站地址,欢迎到访 haha >>> 杰森的小破站


参考资料

技术小白如何建站

Picgo+Gitee搭建个人免费图床

相关文章
|
1月前
|
监控 安全 数据可视化
情报搜集神器:Spiderfoot 保姆级教程
情报搜集神器:Spiderfoot 保姆级教程
58 1
|
安全 Java 关系型数据库
💖10分钟阿里云搭建个人网站(保姆级新手向)💖
我通常都会说自己搭建一个网站,利用阿里云/腾讯云/华为云/七牛云等等各种云服务器来快速搭建一个属于自己的装x小网站,虽然不是很牛x,但是对于说找实习、做毕业设计加分,这种纯粹是绰绰有余,别人会觉得你很有动手能力,话不多说,马上开始,给我十分钟,带你学会一个装x的小知识点。
1394 0
💖10分钟阿里云搭建个人网站(保姆级新手向)💖
|
网络安全 数据库
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
本文演示了三种网站的搭建,分别是:博客、论坛、个人作品。从域名选择,到阿里云服务器的购买,到最后的网站搭建。
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
|
1月前
|
XML 网络协议 搜索推荐
情报搜集神器:theHarvester 保姆级教程(附链接)
情报搜集神器:theHarvester 保姆级教程(附链接)
69 0
|
7月前
|
关系型数据库 Java 数据库连接
MyBatus-Plus保姆级快速上手教程
MyBatus-Plus保姆级快速上手教程
41 0
|
8月前
|
运维 Linux 网络安全
【运维知识进阶篇】手把手教你搭建OpenVPN(保姆级教程)(二)
【运维知识进阶篇】手把手教你搭建OpenVPN(保姆级教程)(二)
2773 0
|
9月前
|
小程序
分享几个免费设计生成及参考工具 (第五期)
今天来给大家分享几个国外免费的PNG图片素材网站
|
10月前
|
人工智能 小程序 搜索推荐
分享几个免费设计生成及参考工具 (第三期)
今天来给大家分享几个国外免费的设计生成工具
|
Web App开发 弹性计算 安全
0基础也能搭建个人网站!
哈喽大家好 ,我是小宇。之前做了一期0成本搭建个人网站的教程,准确来说是0经济成本,反响还不错。但是毕竟是0成本,受限太多,很多小伙伴想学习如何在服务器上搭建网站。正好大学期间,简单的搭建过一些网站,我又做了一些功课,今天小宇就教大家0基础在服务器上搭建属于自己的网站!废话少说,正片开始。
16613 6
0基础也能搭建个人网站!
阿里云的个人使用体验与关于阿里云个人博客搭建的补充
简单快速,通俗易懂易上手,体验满分10分给9.9分吧!!!
187 0

热门文章

最新文章