从零开始部署到上线:手把手教你搭建属于自己的个人博客网站!

article/2025/9/10 6:12:07

博客:其实博客的正式名称是网络日记,见名知意,是使用特定软件在网络上出版发表和张贴个人文章的人,或者是一种由个人管理不定期更新文章的网站。

现在是互联网逐渐发展,已经出现了很多可以供自己写博客的网站,大家可以在上面 发表自己的文章,供自己记录或者是供他人阅读。但是,可不可以自己搭建一个只属于自己的个人博客网站呢?这篇文章就带你从0开始搭建一个自己的个人博客网站,并部署到属于自己服务器。这里有一点要说的是,没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。

博客框架Hexo介绍:


Hexo是一个快速,简介而且高效的博客框架,Hexo 使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可生成一个静态网页展示我们发布的文章,同时也提供了大量精美的博客主题供我们使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]

Hexo博客框架的优点


  • 速度极快:Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  • 支持MarkDown:Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一键部署:只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
  • 插件和可扩展性:这个也是hexo很强大的一个地方,强大的 API 带来无限的可能,与数种模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)轻易集成

Hexo博客框架搭建:


我们使用Centos7系统作为演示,使用其他linux系统也是可以的,只需要更换为对应Linux版本的软件安装命令即可。

1.安装Git

直接使用yum安装即可,在命令行输入 yum -y install git

完成之后输入git version 查看是否安装成功,如果显示git版本信息即为成功,如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]

2.安装Node.js

Node.js是一种运行在服务端的JavaScript,是一个基于Chrome JavaScript运行时建立的一个平台。

Hexo基于Node.js,所以安装Node.js是必须的一个操作,安装步骤如下:

2.1:下载安装包:

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz

2.2:解压缩软件包并配置环境变量:

#解压
tar -xvJf node-v6.10.1-linux-x64.tar.xz#移动到/usl/lcoal目录下
mv node-v6.10.1-linux-x64 /usr/local/node-v6#创建软链接
ln -s /usr/local/node-v6/bin/node /bin/node
ln -s /usr/local/node-v6/bin/npm /bin/npm#添加环境变量
echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile
source /etc/profile  #让环境变量生效

2.3:测试是否安装成功:

在命令行输入node -v 和 npm -v,若是显示出了版本号,即为安装成功:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]

3.安装并使用Hexo

Hexo的安装较为简单,使用如下命令安装

npm install -g hexo-cli
#这里有一点要注意的就是,npm的源是在国外的,访问可能会很慢,这里可以换成我们国内的源进行安装加快速度。操作如下:
npm config set registry https://registry.npm.taobao.org

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]

3.1:初始化Hexo

上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化

#这个文件名字可以自己指定,之后会在当前目录下生成对应文件夹
hexo init <文件名字>
cd 文件名字
npm install

可以看到安装好之后的一个目录结构:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]

目录文件说明:

_config.yml:网站的配置信息,您可以在此配置大部分的参数。

package.json:应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。

scaffolds:模版文件夹。当您新建文章时Hexo 会根据 scaffold 来建立文件Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source:资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes:主题 文件夹。Hexo 会根据主题来生成静态页面。

查看hexo的版本以及对应的数据:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1B3aWxn9-1622032930752)(pictures/image-20210526144143747.png)]

3.2生成静态文件,并开启Hexo服务:

进入到了hexo的安装目录之后,使用hexo generate来生成静态文件,也可以使用hexo g,之后使用hexo server(可以写成hexo s)命令启动服务,操作如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]

可以看到4000端口的服务已经开启,之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]

4.初步使用Hexo:


使用前,我们对我们的站点进行一个配置,也就是我们创建的hexo目录的_config.yml文件,可以修改的部分介绍如下:

# Site
title: QIMING.INFO #博客网站的标题
subtitle:          #博客网站的副标题
description:       #你的网站描述
keywords:          #网站的关键词  
author:            #作者的名字
language:          #博客网站使用的语言
timezone:          #网站时区

我自己的修改如下供大家参考,这里的修改没有太大的限制:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]

4.1:开始使用Hexo发布自己的第一篇博客!

执行下面的目录创建一篇新文章:

hexo new post <文章标题>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

这里我创建了一篇标题为First_Blog的博客,创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件

4.2:编辑文章

进入到上面说的那个目录下可以看到我们创建的博客文件:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]

直接使用vim或者vi就可以对我们的博客文章进行编辑了,打开此First_Blog.md后可以看到—分隔的区域,这部分主要对文章进行标注变量,如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]

title:标题

tage:标签

categories:分类

date:时间

这些标注大家在-----区域可以进行使用

4.3:发布文章

输入如下命令,生成静态网页,静态网页会存放在public文件下

hexo  g
hexo s

之后就可以去浏览器访问了!可以看到我们发布的文章已经成功在浏览器显示,到这里个人博客网站就已经成功搭建了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]

5.主题的选择:

主题网站:https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择,选择喜欢的主题,在hexo目录下的themes文件夹下使用git clone下载主题,之后再配置文件_config.yml把theme后面修改成下载的主题的名字,之后运行hexo clean ,hexo g即可看到生效的主题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]


将Hexo部署上线到服务器:


如果是有服务器的小伙伴,也可以将Hexo部署到服务器供全网访问,服务器的购买这里就不多说,阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话,就需要将上面的全部操作,在你的服务器系统上面执行,之后我们使用Nginx(反向代理服务器)进行部署。

Nginx安装:

Nginx是一款高性能的 HTTP 和反向代理服务器,这里我们采用编译安装的方式,按照下面的指引依次执行命令

#安装gcc编译环境:
yum install -y gcc-c++
#安装zlib-devel库:
yum install -y zlib-devel
#安装OpenSSL密码库:
yum install -y openssl openssl-devel
#安装pcre正则表达式库:编译nginx,需要需要指定pcre的路径,这里我们选择安装稳定版本的。
下载地址:https://ftp.pcre.org/pub/pcre/
#选择对应的版本下载下来之后上传到我们的服务器,也可以使用wget直接下载
tar -xf pcre-8.43.tar.gz
cd pcre-8.43
mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre
make && make install

下载编译安装nginx:

nginx下载官网:http://nginx.org/en/download.html
wget http://nginx.org/download/nginx-1.16.0.tar.gz
mkdir -p /usr/local/nginx
tar -xf nginx-1.16.0.tar.gz
#编译指定安装路径需要进入nginx
cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre
#http_ssl_module  这是支持https的一个模块,就是可以使用https://这样去访问。
make && make install  #编译安装

启动nginx服务:

#启动:
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式启动  -c
#测试:
/usr/local/nginx/sbin/nginx -t      #这个用于测试nginx的语法是否有问题 显示is successful即为成功。
#关闭:
/usr/local/nginx/sbin/nginx -s stop
#继续输入以下命令使Nginx开机自动启动:
systemctl enable nginx
#配置文件的位置:/usr/local/nginx/conf

之后我们需要配置服务器公网ip,编辑配置文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]

之后再重启nginx服务,开启hexo服务,这个时候使用公网的ip就可以访问到我们的hexo服务了!


http://chatgpt.dhexx.cn/article/jTpZ8VOH.shtml

相关文章

从零开始搭建自己的网站一:整体步骤

之前我的博客内容都是写在CSDN上&#xff08;博客地址&#xff09;&#xff0c;后来玩过GitHub&#xff08;博客地址&#xff09;。今天我们从零开始搭建一个属于自己的博客网站&#xff0c;包括服务器&#xff0c;数据库等。 步骤分别为&#xff1a; 1、购买一台云服务器&…

有了域名,怎么搭建自己的网站?

假设我们拥有域名 某某.com&#xff0c;怎么搭建一个网站&#xff0c;访问 www.某某.com 就可以呈现出内容呢&#xff1f; 你首先要知道的是&#xff0c;网站包括了很多东西&#xff0c;具体如下&#xff1a; 域名&#xff08;例如 : 某某.com&#xff09;&#xff1b; 服务器…

在自己的电脑上搭建服务器,发布自己的网站(学习之用)

我们平常学习时经常会写一下javaweb程序&#xff0c;我们为了更能逼近现实&#xff0c;就想着自己的javaweb程序发布后&#xff0c;外网的同学能够访问我们的网站&#xff0c;难道我们去买空间&#xff0c;去买域名嘛&#xff0c;其实也没必要&#xff0c;我们只是学习&#xf…

如何搭建一个属于自己的网站?

这几天正巧在搭建一个属于自己的专属网站&#xff0c;在搭建网站的过程中遇见了很多有趣的问题&#xff0c;于是想把这些问题记录下来&#xff0c;分享给大家。服务器,域名以及域名备案我都是在阿里云这个平台完成的&#xff0c;所以接下来都是以阿里云这个平台来操作的。 目录…

如何搭建一个网站

过几年再看&#xff0c;当时写的内容非常幼稚&#xff0c;后面看到这篇文章的童鞋&#xff0c;其实只需要关注这篇文章写的一些流程性内容即可&#xff0c;技术性的东西写的辣眼睛&#xff0c;不少问题的理解是有问题的。文章中的分享的资源链接我也全删了&#xff0c;没啥用—…

如何搭建一个自己的网站-服务器篇

咪哥杂谈 本篇阅读时间约为 5 分钟。 1 前言 上周我们讲了域名篇&#xff0c;当时我在评论区留言&#xff0c;说域名这个东西&#xff0c;注册的好也是能赚钱的。 结果周五下班的时候&#xff0c;阿里云域名公众号发了这么一条信息&#xff1a; 这意味着什么&#xff1f;以明星…

初学者如何快速搭建一个属于自己的网站

对于小白建站而言&#xff0c;没有一个人手把手教你搭建网站&#xff0c;光靠在网上找帖子建站实在是太困难了&#xff08;比如我&#xff09;&#xff0c;直到有一位学长对我指点一二之后&#xff0c;我才豁然开朗。以下则是我个人最近建站总结出来的一些建议。 现在网站建设主…

如何搭建一个属于自己的网站

想搭建一个属于自己的网站&#xff0c;不知道怎么办&#xff1f;现在都0202年了&#xff0c;任何人都可以在不了解Web开发&#xff0c;设计或编码的情况下建立和设计网站。无论您是想为自己还是为企业创建网站&#xff0c;都可以使用正确的工具和资源轻松地做到这一点。 建设网…

手把手教你搭建一个属于自己的网站-适合零基础小白,文末附网站模板

纯小白向网站搭建教程 写在前面搭建网址基本需求搭建网站主体流程1 域名注册2 租赁并连接服务器2.1 租赁服务器2.2 连接服务器3 配置服务器4 上传网页写在前面 前段时间休息,想着搭一个属于自己的网站,几经尝试终于成功了,希望这篇文章能够帮助到那些编程基础不强,但对搭建…

Form表单提交与Validform验证的那些事

不管是做登录、注册还是实体的添加、修改&#xff0c;我们都会用到表单&#xff0c;并且也会同时用到验证&#xff0c;这里结合Validform验证来详细说明form表单提交的内情。。 1. 引入文件 <link href"css/validate.css" rel"stylesheet" /> <…

来说说validform吧

开始自己写表单验证的时候真的是头疼死了&#xff0c;即使现在有了html5&#xff0c;他可以自动的在表单中写上类似placeholder这样的属性&#xff0c;但是html5的这些属性还具有兼容性。总之还是得自己写一堆js代码来验证的。但是自从发现了这个validform插件以后省去了所有的…

validform表单验证插件最终版

做个笔记&#xff0c;以后直接用吧。 报名界面&#xff1a; <% page language"java" pageEncoding"UTF-8" contentType"text/html;charsetUTF-8"%> <% include file"/public/taglibs.jsp"%> <% include file"/p…

@Valid和@Validated

简介 Validation是一套帮助我们继续对传输的参数进行数据校验的注解&#xff0c;通过配置Validation可以很轻松的完成对数据的约束&#xff0c;配合BindingResult可以直接提供参数验证结果 所有参数注解含义 参考 Validated注解详解&#xff0c;分组校验&#xff0c;嵌套校验…

@Valid与@Validated注解

之前项目中参数的校验&#xff0c;都是自己写的判断方法进行校验&#xff0c;这次采用了spring提供的注解进行参数的校验&#xff0c;更为的方便&#xff0c;简洁。 Valid&#xff1a;常见用在方法&#xff0c;类中字段上进行校验 Validated&#xff1a;是spring提供的对Valid…

Validform.js jQuery验证插件 使用说明

官网原文&#xff1a;http://validform.rjboy.cn/demo.html Validform常用功能示例 申请VIP 您可以享受到&#xff1a; 及时的技术支持(1年)一对一的使用培训第一手的版本更新信息和讲解 申请条件&#xff1a; 1年365天&#xff0c;每天1元钱&#xff0c;您只需支付365元就能获…

Validform表单验证框架详解

Validform是另外一种表单验证框架&#xff0c;也是基于jQuery框架&#xff0c;用法比较灵活。 这里使用该框架的版本号为&#xff1a; Validform_v5.3.2 官网&#xff1a;http://validform.rjboy.cn/ 目前已经打不开了&#xff0c;本文最后会将官方的的demo打包 。 下面来看看…

Validform表单验证总结

近期项目里用到了表单的验证&#xff0c;选择了Validform_v5.3.2。 先来了解一下一些基本的参数&#xff1a; 通用表单验证方法&#xff1a;Demo: $(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在form表单上; btnSubmit:&qu…

数据分析方法与模型

文章目录 1 数据分析1.1 占比分析1.2 趋势分析1.3 对比分析1.4 象限分析1.5 排名分析1.6 维度分析 2 分析模型2.1 费米问题-大致估算2.2 七问分析法-思考角度的拓展2.3 互联网通用模型AARRR、八角分析法2.3.1 AARRR2.3.2 游戏化用户增长策略-八角模型 本文来源&#xff0c;为接…

在mysql中数据模型三要素_数据模型三要素是什么?

展开全部 数据模型三要素是数据结构、数据操作、数据约束。 1、数据结构 是计算机存储、62616964757a686964616fe78988e69d8331333431376634组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合,即带“结构”的数据元素的集合。。通常情况下&#xff…

数据库系统常用的数据模型

数据库系统常用的数据模型 一、层次模型二、网状模型三、关系模型 数据库的发展经历了初始阶段、萌芽阶段、初级阶段、中级阶段、高级阶段&#xff0c;这个过程也产生了多个不同的数据模型&#xff0c;接下来我们讲详细介绍数据库的模型 数据库的发展史 数据库的发展史 初始阶段…