几种搭建方案
1 第三方平台
在现有的博客网站、论坛或社区上注册个人主页。如知乎,掘金,简书,segmentFault,csdn,博客园等。
特点:无技术门槛,可专注于内容。
2 静态网站生成技术
在终端执行命令快速生成静态网站,如 Jekyll、Hugo、Hexo等。然后通过 Github Pages、Coding 等展示。
特点:通过插件可增加评论、搜索、分析等功能。有多种主题可选。在本地以特定格式书写文章,放置在指定的文件夹。每次发布或修改文章都需要重新生成和部署网站。
静态网站和动态网站
静态网站是最初的建站方式,浏览者所看到的每个页面是建站者上传到服务器上的一个 html文件,每增加、删除、修改一个页面,都必须重新对服务器的文件进行一次下载上传。
动态网页中的“动态”是指页面的动态生成。动态网页以数据库技术为基础,当浏览器请求服务器的某个页面时,服务器根据当前时间、环境参数、数据库操作等动态的生成HTML页面,然后再发送给浏览器。
3 内容管理系统 CMS
可搭建企业级网站,博客只是功能之一。如 WordPress,Ghost 等。
特点:带有后台管理的博客系统。在后台可以管理文章、相册、主题,多用户管理等。需要配置数据库、域名、服务器(收费)。一次配置完即可以在后台界面实现各种操作。
域名 ( Domain Name ) 和网站空间 ( Hosting )
通常搭建动态网站需要购买域名和网站空间(或称主机、服务器)。静态网站所需资源较少,在Github Pages、Coding 上可以免费部署。
有了网站空间就有了ip地址,只要主机上你的服务在运行,别人就可以通过ip访问到你的网站。常见的网站空间购买形式有:共享主机,VPS,云托管和专用主机。
有了域名就可以给ip地址一个人性化的别名,允许你用 google.com 而非 216.58.213.164 来访问谷歌网站。
4 手写前端
从无到有完全手写页面,原始的可以直接写 css + html + javascript,或者用 SPA 框架如 Vue.js,React.js。然后通过 Github Pages、Coding 等展示。
特点:可以完全自定义,适合作为前端程序员的练手项目。与方案 2 类似。
5 手写前端 + 后端
自定义前端页面,自定义后台处理请求方式、数据库结构。然后配置域名、服务器。
后端语言如 PHP、NodeJs、Java、Python, 相关框架有Laravel、Express、Spring Boot、Django等。数据库常用的有 MySQL、PostgrcSQL、Redis、MongoDB 等。
特点:可以体验完整的建站流程,迈向全栈之路。与方案 3 类似。
利用 github issues
Issue指的是项目待完成的工作,也可承担用户反馈的作用。现在有许多人也利用Issue写博客。
- 易使用易维护,不需要域名、服务器、数据库。只需要写前端页面,用issues进行后台管理。甚至可以不写前端页面,直接展示issues作为博客。
- 自带评论和收藏系统,读者的反馈可以激励作者持续创作。
自己最近在学React,所以选择了用 React.js
写前端代码并部署在 Github Pages
,利用Github Issues
做为后台,通过Github API
完成前后端交互。
因为平时用的是Vue,所以也实现了Vue版本。
1 react-demo 2 vue-demo 3 react-code 4 vue-code
二者页面样式几乎相同。以下介绍react版本。
项目介绍
功能
-
代码高亮
-
响应式
-
文章锚点导航
-
回到顶部
-
评论跳转
极简
页面极简,代码极简。用最精简的代码,实现最需要的功能。
- 3个页面:Issue list, Issue content, About
- 5个文件:Posts.js, Post.js, PostContent.js, About.js, Catalog.js
定义成你的博客
本地预览
git clone git@github.com:kelyu0/react-issue-blog.git
cd react-issue-blog
npm install
npm run start
浏览器打开 http://localhost:3000 即可本地启动。
自定义
更改src/config.js中的内容,自定义成为你的博客(需要在github上有一个带issues的repository)。
export const config = {
// Your Github UserName
githubUserName: "kelyu0",
// Your Github Repo Name Where You Have your issues as Blog
githubRepo: "articles",
// About Page links
thirdPartySite: [
{
href: "https://github.com/kelyu0",
title: "GitHub",
},
//Other sites ...
],
};
构建和部署
构建:
npm run build
生成 build 文件夹
部署:
- 在 Github 上新建一个名为 github.your_username.io 的仓库
- 将build文件夹之中的内容拷贝到 github.your_username.io 仓库下,推送到远程。
- 访问 github.your_username.io
今天的文章如何搭建个人博客 :几种方案比较 + 个人实现分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/18714.html