免费搭建个人博客网站(免费搭建个人业务网站)

zzxiexin 3 0
序言

个人博客相比大家都很熟悉,特别是做技术,搞研究的等等,各行各业的人都有各行各业不同风格不同用途的博客网站,在网站上面分享自己想分享的内容供其它人随时查看,但是现在各大云服务平台的建站需求都是收费的!而且费用还不便宜,还有时间限制,还有流量限制!这就让我们这群爱折腾的人不能忍了。所以经过我个人的尝试,找到了几条可行的路线,今天的教程采用基于hugo和github的方案。那么话不多说我们即可开始吧!这里是我使用hugo搭建好的个人主页的名称,ps:国内访问可能比较缓慢。http://xuehuxs.github.com

开始前的准备准备所需软件

hugo

采用hugo和GitHub方案,需要准备好hugo的本地环境,在我们的电脑上安装并配置。对于hugo相关的文档和相关使用的连接我会放在本文的最后。

首先进入网站下载最新版本的hugo压缩包。链接:https://github.com/gohugoio/hugo/releases 划至每一个Release的后端,有不同系统对应的下载链接。此处我选择hugo_0.73.0_Windows-64bit.zip。

提示:由于国内的GitHub下载较慢,我会将我下载好的压缩包链接分享到评论区,供大家下载。

下载hugo_0.73.0_Windows-64bit.zip

进行环境搭建将压缩包解压到本地,如下图所示:

解压后

压缩包内的文件

添加hugo.exe到本机的path环境变量内,步骤如下图所示:

环境变量配置的基本步骤

此电脑->属性界面

高级系统属性界面

找到Path变量

添加hugo的环境变量

最后一路确定即可!

验证环境是否构建完成。按下Win键+R键,弹出运行窗口,在窗口内输入cmd,点击确定弹出命令行工具。

运行窗口

在命令行内运行:hugo version查看是否有如下图所示的类似结果。如果有则安装成功。没有则安装失败,可能需要回顾之前的步骤是否有遗漏。

运行hugo version

命令行搭建本地博客hugo new site codexue//本命令的意思是在当前路径下使用hugo新建一个名为codexue的站点简单配置

在创建好我们的网站后我们的目录下会出现以下目录和文件。

codexue目录下的文件结构

这里说明几个最常用的目录和文件:

content:保存我们所需要的发布的博客文件,hugo支持的是Markdown格式的博客文件,具体的Markdown文档可以怎么写,请大家移步Markdown教程,非常的简单,几分钟就能学会!static:如果我们需要在我们的博客内添加图片,我们可以在此目录下创建一个images目录,在引用图片的时候使用/images/name.jpg即可连接到此文件夹内的图片文件。themes:此目录下存储我们冲GitHub上clone的主题仓库。下面我们会讲解主题的简单使用。此处需要我们完成基本主题的设置。--大家可以去https://themes.gohugo.io查看心仪的主题,并通过Git clone到本地的themes目录下。此处我使用的cupper-hugo-theme这个主题,通过git clone [url of theme on github]命令克隆到themes目录下。--然后打开\themes\cupper-hugo-theme\exampleSite目录,目录下有一个config.yaml或者config.toml文件,复制到\codexue目录下。删除原本的config.toml/config.yaml文件。

exampleSite目录

本地运行测试    使用命令行cd命令进入新建的博客的目录下。比如我的就是D:\xuehu\blog\codexue。 运行hugo server -D 会出现如下结果: Building sites … | EN-------------------+----- Pages | 6 Paginator pages | 0 Non-page files | 0 Static files | 32 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0Built in 90 msWatching for changes in D:\xuehu\blog\codexue\{archetypes,content,data,layouts,static,themes}Watching for config changes in D:\xuehu\blog\codexue\config.tomlEnvironment: "development"Serving pages from memoryRunning in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRenderWeb Server is available at http://localhost:1313/ (bind address 127.0.0.1)Press Ctrl+C to stop出现上面的结果后,我们可以访问http://localhost:1313/,即可看到我们的博客运行的结果。

http://localhost:1313/结果

关联GitHub仓库登录到github并创建一个repository[仓库],仓库的名称为:用户名.github.io,设置可见性为public。因为我的仓库是已经存在的,所以有提示。初次创建是没有提示的~

创建仓库

然后本地命令行执行hugo命令,会生成一个/codexue/public目录,我们需要做的就是将此目录的所有文件push到刚刚建立好的仓库里。

public目录

//push到远程仓库的命令cd publicgit initgit remote add origin https://github.com/codexue/codexue.github.io.gitgit add -Agit commit -m "new site first commit"git push -u origin master稍后我们就可访问:http://codexue.github.io即可随时随地看到我们创建的博客啦!附录Hugo中文文档:https://www.gohugo.org/

标签: #免费搭建个人博客网站

  • 评论列表

留言评论

 
QQ在线咨询
售前咨询电话
173-175-32776
技术支持电话
173-175-32776
嘿,欢迎咨询