个人博客搭建指南——保姆级教程
如何搭建个人博客,其实是很简单的!建立个人网站呢,初衷其实非常简单,说不定你也想过,只是没去做而已。我是想:现在的网络中有好多的写作平台,比如我现在在用的C站,它已经非常成熟,社区讨论、问题发布、Blink动态等等,一应俱全。我在学完相关知识后,为什么不能自己写一个呢?也许更多的是我爱折腾罢了,哈哈最开始接触是在C站文章发布“板块自定义”模块中,输入几行代码,就能有漂亮的界面。当时因为还没有接触
如何搭建个人博客,其实是很简单的!搭建个人博客可以分为以下几个步骤:
- 选择博客平台或自建博客:可以选择使用博客平台,如WordPress、Blogger等,或者自己搭建博客。
- 选择技术和语言:如果选择自建博客,需要选择搭建博客的技术和语言。可以选择使用Java技术和相关框架,如Spring Boot和Thymeleaf等。
- 确定博客主题和样式:可以选择使用现成的主题和样式,也可以自己设计。
- 搭建博客后台:使用Java技术和相关框架,如Spring Boot和Spring Security等,搭建博客后台,实现博客文章的管理和发布等功能。
- 实现博客前台:使用Java技术和相关框架,如Thymeleaf和Bootstrap等,实现博客前台的展示和交互等功能。
- 前后端分离的话,建议使用VUE插件化开发
建立个人网站呢,初衷其实非常简单,说不定你也想过,只是没去做而已。我是想:现在的网络中有好多的写作平台,比如我现在在用的C站,它已经非常成熟,社区讨论、问题发布、Blink动态等等,一应俱全。我在学完相关知识后,为什么不能自己写一个呢?也许更多的是我爱折腾罢了,哈哈
最开始接触是在C站文章发布“板块自定义”模块中,输入几行代码,就能有漂亮的界面。当时因为还没有接触到CSS、Web前端这些,是从网上白嫖来的,更是激起了我深入学习的兴趣
什么是博客,博客是大家分享、交流的一个平台,我们可以从中吸取别人的经验,提升自己。对于看博客的人来说是这样,对于写博客的博主呢,更是对自己所学的总结,能理清自己的思路,便于日后复盘,养成良好的习惯。技术博客,能记录我们遇到的问题,更好的Bug处理方案,在我们日后开发的过程中遇到同样的问题,记忆会更加深刻
有了想法就要动手,当我真正动手去实现的时候,才发现并不是一些标题党发的文章,像“十分钟建立属于你的网站、你还不会自己建网站?”。等到自己真正看着他们的视频、文章去操作的时候,有的是真大神,他默认的一些东西你应该是会的,会写的简单一些。还有一些,就是“伟大的搬运工”了,完完全全就是发布了别人的文章,还不放原文链接那种
正是我没有发现一套完整的,能帮助新手开发一个网站的资源,所以决定写下 UP 建站的过程,分享我从初学到最后实现的一些经验。所以,如果你也想要拥有一个属于自己的网站,可以跟着上手操作下,过程中如果遇到问题可以私信或留言。下面,让我们一起开始吧
思考下,我们查资料用的最多的是什么?有些朋友就会说了:那还用问,必须是“在B站上大学“啦,亦或是搜索引擎了。没错,我想这正是我们大多数人学习新东西、不断探索向前时使用最多的工具了。那,我们搜些什么呢?比如,你可以这样:
或许,你还可以这样:
的确能搜到很多的视频、文章。但是在这部分,我以我是初学者的角度来描述下我的心路历程:因为这东西目前在我的脑子里就是一个初步的想法,我还不知道怎么去实现它。就像是一个人在山里迷路了,我只知道要出去,可我找不到路啊
这一 pa,我们就来聊一些建站,我应该准备什么。网上大多数教程啊,都是一个大长篇,鼠标滑好几下都不带滑完的那种。会给刚入门的朋友一种:”哇,好难啊,这么多东西啊“的感觉,所以这里我对各部分的内容进行了分类,你只要按照顺序,一步步往下走就好啦
如果你想搭建自己的博客网站,这篇文章可以为你提供一些搭建思路。目前的博客框架可以分为两大类,第一类是使用动态网页技术的博客框架,另一类是基于静态网页生成器的博客框架。
基于动态网页技术的博客框架具有代表性的是WordPress和Typecho,对于这类框架来说个人博客只是它的功能之一,它还可以作为商用网站的一种解决方案。这类框架更适合想要在互联网上建立自己的品牌和形象的企业和个人。
而基于静态网页技术的博客框架具有代表性的是Hexo、Jekyll和最近比较流行的用go语言开发的Hugo。这类框架并不需要云服务器的支持,大概逻辑是这类框架先在本地生成网站代码,在上传到GitHub或Git这类项目托管平台利用GitHub Pages这类功能托管生成的出来静态网站。
我目前使用的是notion搭建个人博客,之前使用过Wordpress和Hexo。这篇文章将介绍Wordpress、Hexo、Notion以上三种的博客搭建方式。
优缺点分析:
WordPress:
优点:
操作相对简单,拥有丰富的插件和主题。
具有很高的扩展性,适合做一些功能较为复杂的网站。
拥有后台管理界面,可以实现用户注册等功能。
缺点:
这类框架需要有云服务器的支持,对云服务器本身的带宽有一定的要求,随着博客内容的增多对带宽的要求只会越来越高。
主题偏商业化,对于我来说我搭建博客的目的只是做知识分享所以网站想搞得花哨一点,而Wordpress提供的主题不太符合我的想法。
Hexo:
优点:
拥有丰富的主题,可以设置许多有趣的视觉效果插件
在GitHub上Hexo拥有强大的插件生态圈,可以通过插件来满足很多的博客需求。
不需要云服务器,这代表着不需要去维护云服务器的安全以及不必花时间去学习相关技术。
缺点:
由于是静态生成的网站数据,每次更新一篇博客需要在本地用md文件编辑好后上传至GitHub,相对较麻烦。
下面展示以下我用wordpress和Hexo搭建出来的博客效果:
Wordpress:
Hexo:
二、网站搭建手册:
域名购买:
国内主要的购买域名网站无非就是腾讯云、阿里云、华为云,随便找一个注册即可。
tips:如果你使用的是Hexo等静态网页技术搭建的框架是可以不用买域名的,GitHub提供了一个二级域名,格式为:https://用户名.github.io。
这里以慈云数据为例:
WordPress网站搭建方法:
首先是购买云服务器,购买网站还是上面三个网站,购买好后服务器创建实例时会询问你需要什么样的系统,可以直接选择购买网站提供的WordPress镜像,云服务器实例生成好后跟着指示操作即可:
启动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 //快速部署 |
出现图示内容表示部署成功,等到备案完成后就可以通过域名访问了
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)