从零开始部署到上线:手把手教你搭建属于自己的个人博客网站! | 您所在的位置:网站首页 › 博客搭建源码怎么弄 › 从零开始部署到上线:手把手教你搭建属于自己的个人博客网站! |
博客:其实博客的正式名称是网络日记,见名知意,是使用特定软件在网络上出版发表和张贴个人文章的人,或者是一种由个人管理不定期更新文章的网站。 现在是互联网逐渐发展,已经出现了很多可以供自己写博客的网站,大家可以在上面 发表自己的文章,供自己记录或者是供他人阅读。但是,可不可以自己搭建一个只属于自己的个人博客网站呢?这篇文章就带你从0开始搭建一个自己的个人博客网站,并部署到属于自己服务器。这里有一点要说的是,没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。 博客框架Hexo介绍:Hexo是一个快速,简介而且高效的博客框架,Hexo 使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可生成一个静态网页展示我们发布的文章,同时也提供了大量精美的博客主题供我们使用。 ![]() 我们使用Centos7系统作为演示,使用其他linux系统也是可以的,只需要更换为对应Linux版本的软件安装命令即可。 1.安装Git 直接使用yum安装即可,在命令行输入 yum -y install git 完成之后输入git version 查看是否安装成功,如果显示git版本信息即为成功,如下: ![]() 2.安装Node.js Node.js是一种运行在服务端的JavaScript,是一个基于Chrome JavaScript运行时建立的一个平台。 Hexo基于Node.js,所以安装Node.js是必须的一个操作,安装步骤如下: 2.1:下载安装包: 代码语言:javascript复制wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz2.2:解压缩软件包并配置环境变量: 代码语言:javascript复制#解压 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,若是显示出了版本号,即为安装成功: ![]() 3.安装并使用Hexo Hexo的安装较为简单,使用如下命令安装 代码语言:javascript复制npm install -g hexo-cli #这里有一点要注意的就是,npm的源是在国外的,访问可能会很慢,这里可以换成我们国内的源进行安装加快速度。操作如下: npm config set registry https://registry.npm.taobao.org![]() 3.1:初始化Hexo 上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化 代码语言:javascript复制#这个文件名字可以自己指定,之后会在当前目录下生成对应文件夹 hexo init cd 文件名字 npm install可以看到安装好之后的一个目录结构: ![]() 目录文件说明: _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的版本以及对应的数据: ![]() 3.2生成静态文件,并开启Hexo服务: 进入到了hexo的安装目录之后,使用hexo generate来生成静态文件,也可以使用hexo g,之后使用hexo server(可以写成hexo s)命令启动服务,操作如下: ![]() 可以看到4000端口的服务已经开启,之后在你的浏览器输入http://:4000,如下可以看到最开始的一个界面: ![]() 4.初步使用Hexo: 使用前,我们对我们的站点进行一个配置,也就是我们创建的hexo目录的_config.yml文件,可以修改的部分介绍如下: 代码语言:javascript复制# Site title: QIMING.INFO #博客网站的标题 subtitle: #博客网站的副标题 description: #你的网站描述 keywords: #网站的关键词 author: #作者的名字 language: #博客网站使用的语言 timezone: #网站时区我自己的修改如下供大家参考,这里的修改没有太大的限制: ![]() 4.1:开始使用Hexo发布自己的第一篇博客! 执行下面的目录创建一篇新文章: 代码语言:javascript复制hexo new post[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)] 这里我创建了一篇标题为First_Blog的博客,创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件 4.2:编辑文章 进入到上面说的那个目录下可以看到我们创建的博客文件: ![]() 直接使用vim或者vi就可以对我们的博客文章进行编辑了,打开此First_Blog.md后可以看到—分隔的区域,这部分主要对文章进行标注变量,如下: ![]() title:标题 tage:标签 categories:分类 date:时间 这些标注大家在-----区域可以进行使用 4.3:发布文章 输入如下命令,生成静态网页,静态网页会存放在public文件下 代码语言:javascript复制hexo g hexo s之后就可以去浏览器访问了!可以看到我们发布的文章已经成功在浏览器显示,到这里个人博客网站就已经成功搭建了。 ![]() 5.主题的选择: 主题网站:https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择,选择喜欢的主题,在hexo目录下的themes文件夹下使用git clone下载主题,之后再配置文件_config.yml把theme后面修改成下载的主题的名字,之后运行hexo clean ,hexo g即可看到生效的主题。 ![]() 如果是有服务器的小伙伴,也可以将Hexo部署到服务器供全网访问,服务器的购买这里就不多说,阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话,就需要将上面的全部操作,在你的服务器系统上面执行,之后我们使用Nginx(反向代理服务器)进行部署。 Nginx安装: Nginx是一款高性能的 HTTP 和反向代理服务器,这里我们采用编译安装的方式,按照下面的指引依次执行命令 代码语言:javascript复制#安装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: 代码语言:javascript复制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服务: 代码语言:javascript复制#启动: /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,编辑配置文件。 ![]() 之后再重启nginx服务,开启hexo服务,这个时候使用公网的ip就可以访问到我们的hexo服务了! |
CopyRight 2018-2019 实验室设备网 版权所有 |