零基础免费搭建个人博客网站

在大学时候自学过一丁点HTML的基础皮毛,对建站有那么一丁点的认识。作为自己业余爱好建立了本博客,简单的写下来搭建方法给搞技术的朋友们。

一、网站概念

首先来科普下网站的概念:
笼统的讲,网站有两类:动态网站静态网站。并不是动态网站会动,静态网站不会动,千万不要这样理解,是会被笑话的。
简单地说,程序是否在服务器端运行,是重要标志
在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页,例如ASP、PHP、JSP、 CGI等。

而静态网站只有固定的文件,是单向的,类似你用文件管理器浏览你硬盘里面的资料,这些资料并不会由于不同用户,不同时间浏览而对你显示不同的效果,无论你在何地、何时打开播放1.MP3,他就只会播放1.MP3。详细的解释可以点前面超链接了解区别。

二、最终选择

既然标题说了是0元建站,那就该省的都省了(省了服务器费用,域名费用),为了保证良好的访问速度和体验,我们选择静态网站。

静态网站是需要有本地的网站渲染程序进行渲染我们的网站文件,不然纯手敲HTML+CSS+JS,那更新一篇文章可敲到何年何月了。
简单的说,我们搭建好环境后,我们只负责写文章内容,其他网页代码交给程序渲染生成。然后把这套网站代码上传服务器即可。
同类的静态博客程序有很多,前3名依次是Jekyll 、 Hexo 、 Hugo。三个我都有尝试过,最后选择了用户量第二的Hexo,个人感觉是三者中最简单快捷的。
据说Hexo是一个台湾学生的毕业设计,所以比较符合国人的使用习惯,支持国产。原理:hexo渲染出网站文件,使用git工具上传到Coding服务器。

三、准备工作

Windows 7 && 10 环境下 需要安装:

  • Node.js
  • Git
  • 文本编辑器(推荐Sublime)

需要注册的网站:Coding

3.1 安装node.js(必须)

下载: 官网下载 百度云 密码:xnb2


一路Next即可

最后点Finsh,安装完毕。
PS: 如果安装失败,提示ERROR code:XXXX 巴拉巴拉等字样,请尝试用管理员权限安装。

3.2 安装Git(必须)

下载: 官网下载 百度云 密码:2d4b


同样一路Next

最后点Finsh,安装完毕。

3.3 安装Sublime Text3(可选)

下载: 官网下载 百度云 密码:uhzl


然后一路Next ,最后Finsh即可。

建议添加右键菜单,添加成功后如下图

3.4 注册Coding(必须)

Coding提供了page服务,是我们用来放网站文件的免费‘服务器’
用户名设置后不可更改,如果不打算买域名,那么以后你的网站地址就是 https://用户名.coding.me,建议自己想好再设置。

注册后,会提示验证邮箱。

我们登录填写的邮箱,进行验证

进入之后,创建第一个新项目

如下图设置:
项目名称填写: 用户名.coding.me(用户名复制自己的)
(请注意用户名区分大小写,请严格比照图示设置项目名称,否则后面会报错。)


提示Coding Pages 已经运行在 http://xxx.coding.me

现在Coding端设置已经完成。

Ps: 同类的代码托管网站有Gitee、Github等。本文选择国内速度比较块快,功能完善的Coding。
其他托管网站也可使用,与Coding大同小异,这里不再赘述。

四、安装Hexo

4.1 创建网站本地目录

在电脑上新建一个Blog文件夹,建议D盘根目录如 D:/Blog,这个文件夹是我们本地网站的目录。由于我在虚拟机下,只有C盘,所以我建在桌面。

4.2 切换NPM源

NPM源由于服务器在国外,速度比较慢。为了避免安装中断,我们使用淘宝NPM镜像,输入以下命令安装cnpm,等待几分钟完成(我这里用了131s)。(仅需一次)
npm install -g cnpm --registry=https://registry.npm.taobao.org

(如果此步骤提示找不到npm指令,请检查node.js是否安装成功)

4.3 安装Hexo

使用以下命令安装Hexo(仅需一次)
cnpm install -g hexo-cli

使用hexo -v指令查看hexo的版本,如下图可以看出

使用hexo init指令初始化hexo(仅需一次)

4.4 本地预览网站

使用hexo s指令预览网站,可能Windows防火墙会弹出提示,这时候我们选择允许访问

上图提示信息意思为hexo已经运行在http://localhost:4000/,你可使用Ctrl + C组合键来停止预览。现在不要动这个窗口,我们打开浏览器访问http://localhost:4000/

如上图,你现在已经成功一大半了。现在网站已经可以运行在我们电脑本地了,但是别人还不能访问,因为网站文件仅仅在我们自己电脑上。需要传到Coding上之后,别人才可以访问你的网站。

4.5 Blog文件夹的目录结构(了解)

我们可以了解下Blog目录下的每个文件夹及文件的作用

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

五、配置SSH部署公钥(仅需一次)

本步骤的目的是确保只有你本人才能改动和编辑网站内容
回到bash黑窗口,输入指令ssh-keygen -t rsa -C "your_email@example.com"(你的邮箱),连续点击 Enter 键即可。( 指令中的字母 C要大写、C要大写、C要大写 重要的事情说三遍!)
如下图

官方参考

配置的目的是为了保证只有自己可以改动和上传到仓库,防止别人更改你网站的内容。
找到我们刚刚生成的公钥id_rsa.pub,编辑器打开,复制里面的内容

回到Coding网站,把粘贴板上的内容粘贴到里面,如下图。

点击添加,会验证Coding的密码,输入Coding的密码即可。
这样就完成了公钥配置完成。

六、配置博客网站

打开Blog文件夹,如下图我们使用Sublime打开_config.yml文件,对博客进行配置。

配置文件使用的语法大小写敏感空格敏感英文冒号后必须有空一个空格 使用#号注释
我们可以随意更改的有tittle网站标题,subtitle小标题, description网站描述。

第10和11行语言时区可以默认空着。如需填写可复制如下配置。

1
2
language: zh-Hans
timezone: Asia/Shanghai

第15行url:这里填写我们第三步中提示的URL,即我们以后将使用的域名(域名就是网址)。

其他项如不清楚含义或者格式,强烈建议不要修改。

配置文件拉到最下面 (重要),本部分修改的是上传的地址,是网站是否能成功上传到服务器的关键

配置原文如下,coding部分替换成你自己的Coding地址。

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
coding: git@git.coding.net:UserName/UserName.coding.me.git,master
message: xx更新了博客 # 这里可以随便写,每次更新博客提交的显示的信息。

Coding地址从Coding网站的这里找到:

七、配置Git和Git部署插件

7.1 配置git昵称和邮箱(仅需一次)

继续回到bash黑色框框

使用命令git config --global user.email "you@email.com"配置Git邮箱,记得把邮箱替换成自己的
使用命令git config --global user.name "Kevin"配置Git用户名,记得把昵称替换成自己的

7.2 安装git上传插件(只需一次)

使用以下命令安装hexo-deployer-git工具
cnpm install hexo-deployer-git --save

八、网站PUSH到Coding

hexo g代表渲染网站文件,hexo d代表push网站文件到云端仓库,这两条指令可以单独依次执行。
hexo g && hexo d或者hexo d -g这两个是组合命令,作用相同,以后熟练可以使用。)

然后会弹出一个让你确认的窗口,你输入yes后确定即可。

九、访问网站

现在我们访问自己的域名 http://mapann.coding.me即可访问我们自己搭建的网站了。如果看到已经可以访问,那么恭喜!大功告成!


如何写文章?

可以看我这篇文章 使用Hexo写文章

后续优化

如何更改主题?

(挖坑待填)
可以自定义和优化的有很多,比如不喜欢默认的主题,我们可以去hexo官网
下载更漂亮的主题,如比较火的NexT主题

如何绑定自定义域名?

(挖坑待填)
可以绑定自己的域名。(域名就收费了,不在本文探讨范围内)

如何压缩网站文件,加快访问速度?

(挖坑待填)
可以压缩网站文件,可以安装许多插件。

快去写文章吧,网站只是载体和工具,内容才是主要的。等待你的友链!
如果你在按照教程走出现了问题,可以在下方评论区留言,或者进Q群讨论 613284009

本文参考


2017-12-17更新

如果觉得有难度不容易上手,那么还可以有以下几个选择:
CSDN博客: 集成好的功能,只需要注册即可使用,但并不是独立博客。
简书: 一个比较文艺的地方,你同样可以用来写技术文章,同样注册即可使用,不是独立博客。
博客园: 可定制化比较强,听名字就知道是做什么了。
wordpresstypecho等其他动态博客程序 :部署简单、需要购买虚拟主机或者VPS服务器。

···

其实说到底博客只是一个用来展示自己的地方,重要的还是自己有所学习,一个博客的内容才是最重要的。写本文的目的仅仅是为了帮助一些做技术但对网站前端不太懂,而且想少花钱搭建独博客的人。
做技术本身就要一股钻劲儿,要知道专业领域比搭网站复杂的多。


马攀 wechat
最新动态,关注攀文墨公众号