怎么制作网站;如何制作网站,免费个人网站制作教程

西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus外贸独立站

本文讲述如何制作网站以及制作免费个人网站的教程。 其实这篇文章也可以看作是关于如何使用hexo的教程。 本篇文章我们将介绍如何使用hexo搭建一个免费的个人网站。

网站制作前的准备工作

如果你想建立一个可以通过互联网访问的网站怎么制作网站,你必须有域名和服务器。 域名是网站的门户。 我们一般都是通过域名来访问网站,并浏览网站上的内容。 服务器可以看作是存储网站内容的计算机。 浏览网站的过程实际上可以看作是使用浏览器软件将服务器上存储的内容下载到自己的电脑上并通过浏览器显示的过程。

域名

一般来说,我们在网上购买的域名都是二级域名如: 此类域名大多需要花钱购买。 虽然网上有一些免费的二级域名,但这些域名大多都存在一些问题,比如:使用一年后需要花钱购买。 因此,本文使用提供的三级域名,如jcpgr.github.io。 当我们购买二级域名时,我们会自动获得对应三级域名的所有权,所以我们只是jcpgr.github.io域名的使用者,而不是所有者。

服务器

服务器是我们存储网站内容的地方。 在本文中,我们将使用 hexo 静态博客生成器来创建一个网站。 该工具生成的网站是静态网站。 静态网站由页面组成,不需要与数据库交互。 这样我们就可以将hexo生成的网站发布到提供的仓库中,完成网站的部署。

其他说明

除了使用网站制作个人网站外,您还可以使用诸如. 另外,如果您想购买自己的域名和服务器来建站,可以参考下面链接中的文章来建站。

如何制作一个网站

链接:/s/1MsaugTRmtuxTsDFHzDpBUA 提取码:ewkq

在百度网盘下载Git-2.31.1-64-bit.exe和node-v14.17.0-x64.msi软件并安装。 您也可以从相应的官网下载该软件并安装。安装完成后,将鼠标移至桌面,右键选择Git Bash Here。 然后在git窗口中输入node -v和npm -v,检查步骤1中的软件是否安装。 在窗口中输入 npm install -g hexo-cli 命令。 并按回车键执行并安装hexo客户端(因为我的电脑上已经执行过该命令,示例图中的返回可能与第一次安装返回不同)使用hexo init wz命令在上生成wz桌面文件夹,接下来的操作都会在该文件夹中进行。 使用cd wz命令进入wz文件夹。 使用 npm install 命令生成网站模板。 至此,我们就在本地完成了最简单的个人网站制作。 使用hexo服务器命令来运行它。 对于一步生成的网站外贸建站,执行命令后,可以在浏览器输入localhost:4000查看正在运行的网站,同时按键盘上的ctrl和c键终止网站本地运行。

如何制作一个网站。 部署已完成的网站。 在网站上注册一个帐户,然后单击“创建存储库”来创建仓库(步骤1)。 仓库名称设置为[username.github.io](步骤2)。 如果设置为其他名称如:test,那么网站最终的访问路径会变成 [username.github.io/test] 创建仓库时选择Add a README file。 此时,仓库生成后(步骤2)会自动生成README.md文件,点击Settings(步骤3),在弹出的页面底部点击Check it out here(步骤4)。 此时,一个最简单的网站就已经生成了。 因为此时仓库中只有README.md文件,我们可以通过在网站中查看这个文件。 打开上一章的wz目录,右键鼠标选择Git Bash Here,执行npm install hexo-deployer-git –save命令(第五步)。 我们需要使用hexo-deployer-git将hexo文件部署到github仓库。 执行命令 git config –global user.name "username" 和 git config –global user.email "email" (步骤 6),使用这两个命令来初始化 git。 执行命令 ssh-keygen -t rsa -C "mailbox" 并按 3 次 Enter 键(步骤 7)。 该命令是生成一个key,其中【mailbox】要填写你自己的邮箱。 这个密钥是git软件用来登录github仓库的。 执行命令cat ~/.ssh/id_rsa.pub获取生成的密钥(第7步),点击网站头像下方的Settings,在弹出的页面中选择SSH和GPG密钥,然后选择New SSH key,粘贴key 转至与该key对应的框。 (第八步)执行命令ssh -T 检查密钥是否设置成功。 如果成功怎么制作网站,将显示用户名。 (第七步)打开上一章wz目录下的_config.yml文件,将文件最后两行替换为下面的代码怎么制作网站;如何制作网站,免费个人网站制作教程,其中[username]需要替换为实际用户名如:jcpgr

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: main

最后分别执行hexo clean(删除上次hexogenerate生成的文件)、hexogenerate(生成网站内容)、hexodeploy(push网站内容到github)命令将本地网站推送到github,等待几分钟然后再尝试通过jcpgr.github.io访问网站

步骤1:

网站创建教程

第2步:

如何制作一个网站

第三步:

免费个人网站

第四步:

网站创建教程

第五步:

如何建立网站

第六步:

网站建设教程

第7步:

如何制作个人网站

第八步:

免费网站创建教程

第九步:

个人网站建设教程

第十步:

如何制作免费网站 网站建设教程中的附加说明

您可以在本地运行网站,通过hexo server命令查看文章的效果。

生成新的网页内容

使用hexo new post“测试文章”命令生成新的网页内容,然后再次执行hexo clean、hexogenerate、hexodeploy命令将网站推送到github上。 几分钟后,再次通过jcpgr.github.io访问网站。 此时,网站上已经可以看到名为【测试文章】的网页。

显示图像和修改网页

使用hexo new post“测试文章”命令生成的网页位于/wz/source/_post目录下。 打开【测试文章.md】修改文章内容。 您不需要知道如何修改网页。 你只需要了解 Markdown 语法即可。 修改网页。 在源码目录下新建一个图片文件夹,将test.png图片放入该文件夹中,然后使用[testarticle.md]下面代码中的字段引用该图片。

![测试图片](./image/test.png)

修改文章路径

我们可以看到上一步中[测试文章.md]对应的网页路径前面有年、月、日。 我们可以通过修改 wz 文件夹中 _config.yml 第十七行来删除它们,并将 permalink : :year/:month/:day/:title/ 修改为 permalink: :title.html

修改网站主题

Hexo 有很多不错的网站主题。 各种主题的安装方法可以在相应主题的网站上找到。 一般我们在百度搜索“hexo主题”时shopify搭建,第一个查询的就会看到各种主题。 我们以蝴蝶主题为例来说明。

npm install hexo-renderer-pug hexo-renderer-stylus --save

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

西西木科技是shopify官方合作伙伴,通过了Shopify Partner Academy认证,具备多年shopify lic主题开发经验,熟悉Liquid和各项计算机语言。

发表评论