0成本搭建个人博客网站之制作静态网页

下面是本教程所需要的资源的官网请自行下载并安装:

1.Git系统Git

2.Node.js: https://nodejs.org/zh-cn/

(没有魔法下载很慢)

让我们开始吧!

1.安装Git系统

1.在下载完安装包后双击打开直接无脑下一步如果你熟悉Git可以按照你的习惯安装

2.安装完成后可以在桌面或者文件夹右键一下验证Git安装是否成功

如果出现这两个选项说明安装成功了!

2.安装Node.js

1.安装程序下载后安装过程也直接无脑下一步!

2.验证Node.js是否安装完成,打开命令提示符,在窗口输入

node -v

 然后按回车

像这样如果出现了版本号就代表安装完成了!

3.安装Hexo

简介:Hexo是一款基于Nodejs的,快速、简洁且高效的博客框架。具有丰富的插件和主题,具有超快的速度。在本教程中我们将使用这个框架来搭建个人网站

1.在这之前我们需要新建一个文件夹用于存放我们的个人网站的所有文件文件夹名可以是中文

2.打开你新建的文件夹右键点击选项Git Bash Here 注意!这里必须要在你新建的文件夹里右键)

这时会跳出一个Git窗口

在窗口中输入代码并回车

npm install hexo-cli -g

(注意!不要使用快捷键ctrl+v粘贴进去可以右键粘贴)

需要等几秒如果出现了类似上面的信息说明代表成功了

继续输入代码

hexo init blog

这时我们打开刚才新建的文件夹会出现一个名为blog的新文件夹

我们继续依次输入代码

cd blog
npm install
hexo server

(hexo server可以简写为hexo s 这个代码可以用于在本地浏览自己的个人网站)

                          不出意外你可以看到在你本地运行的个人网站的地址了

我们把这个地址复制下来在浏览器中打开(不要用Ctrl+c复制!!!,Ctrl+c是Git停止运行这个网站的快捷)

                        你拥有一个在本地运行的个人网站了!!但别人还不能访问这个网站

在后期的教程中我们会学习如何将这个网页上网

3.编辑博客

显然你不满意这个系统原装的博客页面,不过还好,hexo提供了丰富的主题美化你的个人博客网站。

1.更换网站主题

我们在浏览器输入这个链接打开hexo的官网

Hexo

下拉到页面最下面

点击探索主题

这里有各种主题供你选择

例如我选择了这个

点击上面的链接

我们来到了github

下拉就可以看到配置指南了,按照上面的说明把代码复制到Git窗口上运行。(记得在Git页面按Ctrl+c

停止运行网页)

这里安装过程我偷懒省略掉了按照说明来就可以了

安装完成后我们可以输入hexo g 来生成网页内容

最后输入hexo s 预览我们安装的的网页

在浏览器中打开刚才复制的个人网站网址,可以看到主题已经更改了

我们可以安照指南进一步配置网站

4.给这个网站写一篇文章

到现在为止这个网站空空如也,让我们给这个网站写一篇博客吧!

在Git窗口输入 hexo new "你的文章名称" (注意符号)来创建你的文章

创建完成!

打开我们网站的文件夹

打开这个文件夹下的名为_posts的文件夹,这个文件夹下储存了你的网站的所有的文章,在这里可以看见我们刚刚创建的文章了!

这里使用的是MD语言编写的文章,这个语言学习起来非常简单不需要特别安装什么软件来编辑,用Windows自带的记事本也可以编辑,我用的PyCharm Community Edition 也能编辑,甚至还带预览。我们还可以在文章中插入图片链接。

可以看看这个MD语言教程来编辑

友情链接:.md(markdown)文件的基本编写语法 。- 简书 (jianshu.com)

到这里我们的静态网页制作的就差不多完成了。

5.你需要知道的hexo 指令

均为简写

hexo s                        #在本地预览网页

hexo g                         #生成网页内容

hexo new "文章标题"  #生成一篇网页文章

hexo d                        #部署网页内容

6.你可能想知道的

1.什么是MD语言?

Markdown (MD)是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown(MD) 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 编写的文档后缀为 .md, .markdown。

  • 49
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
网页设计是指通过使用各种技术和工具,将网页的布局、颜色、图像、文字等元素进行设计,以达到美观、易用和用户友好的目的。而制作静态网页则是指使用HTML、CSS等静态技术来创建网页,这些网页内容在用户访问时不会发生变化。 在网页设计中,需要考虑以下几个方面: 1. 网页布局:确定网页的整体结构,包括头部、导航栏、内容区域和底部等部分的位置和排列方式。 2. 色彩搭配:选择合适的颜色搭配方案,使网页看起来美观、舒适,并与网站的主题或品牌形象相符。 3. 图像和图标:选择适当的图片和图标来增加网页的视觉吸引力,并能够有效地传达信息。 4. 字体选择:选择合适的字体样式和大小,以确保文字内容易于阅读,并与整体设计风格相匹配。 5. 导航设计:设计易于导航的菜单和链接,使用户能够轻松地浏览和访问网页的各个部分。 6. 响应式设计:考虑不同设备上的显示效果,使网页能够自适应不同的屏幕尺寸和分辨率。 制作静态网页主要使用HTML和CSS来实现。HTML(超文本标记语言)用于定义网页的结构和内容,包括标题、段落、图像、链接等元素。CSS(层叠样式表)用于控制网页的样式和布局,包括颜色、字体、边距、背景等。 以下是制作静态网页的基本步骤: 1. 使用文本编辑器创建一个新的HTML文件。 2. 在HTML文件中编写网页的结构和内容,包括标题、段落、图像、链接等。 3. 使用CSS样式表来设置网页的样式和布局,包括颜色、字体、边距、背景等。 4. 保存HTML和CSS文件,并在浏览器中打开查看效果。 5. 根据需要进行调整和修改,直到达到满意的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值