教你如何制作浪漫的表白網(wǎng)站

時(shí)間：2022-08-29 00:15:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-29 00:15:01 來源：網(wǎng)站運(yùn)營(yíng)

底部有彩蛋，不要錯(cuò)過(????)?"""

前言

前不久是情人節(jié)，一些小伙伴向我請(qǐng)求網(wǎng)頁(yè)表白的教程，但因?yàn)楸容^忙，所以教程一直遲遲沒有出來，趁著今天的閑暇時(shí)光，我把教程寫出來。

雖然，一些網(wǎng)站已經(jīng)提供了傻瓜式表白網(wǎng)頁(yè)制作如我要表白網(wǎng)，但是這樣的話雖然也能達(dá)到目的，但是域名畢竟不是自己的，不是很滿意，所以接下來的教程是基于自己的域名實(shí)現(xiàn)的，域名注冊(cè)的教程請(qǐng)查看如何在阿里云申請(qǐng)域名，另外有了只有域名當(dāng)然是不行的，還需要擁有自己的服務(wù)器，但是國(guó)內(nèi)的服務(wù)器如阿里云綁定域名后還需要備案才能使用，很麻煩，下面我們利用Github pages來實(shí)現(xiàn)網(wǎng)頁(yè)表白，因?yàn)镚ithub的服務(wù)器在國(guó)外，所以小伙伴們不用擔(dān)心備案的問題，域名注冊(cè)完成后直接解析到151.101.100.133即可。

快速開始

首先部署自己的Github Pages,請(qǐng)查看如何在Github Pages搭建自己寫的頁(yè)面？搭建好自己的Github pages頁(yè)面后，推薦大家使用Github Desktop,因?yàn)閷?duì)于一些小白童鞋來說Git Bash上手還是有些難度，所以這里使用Desktop.

表白網(wǎng)頁(yè)制作

大家可以先看一下最終的效果

很漂亮有木有，非常感謝那位不知名大神的制作。下載該網(wǎng)頁(yè)的源碼一共為大家收集了12款表白網(wǎng)頁(yè)源碼，其中圖中對(duì)應(yīng)于表白網(wǎng)頁(yè)款式二，下載到電腦上以后用Visual Studio Code打開，可以看到


修改時(shí)間找到如圖代碼，修改即可


如需更換網(wǎng)頁(yè)背景樂，將所需要的音樂復(fù)制到文件夾下并重命名為renxi.mp3即可（音樂文件大小越小越好，不然打開網(wǎng)頁(yè)可能不能很快聽到音樂，加載緩慢）

使用自己的域名

打開Github Desktop軟件，


點(diǎn)擊Clone repositor，選擇你剛才創(chuàng)建的****.github.io倉(cāng)庫(kù)，再選擇一個(gè)本地路徑，Clone完畢后，把表白網(wǎng)頁(yè)的文件夾復(fù)制到該倉(cāng)庫(kù)中，填寫左下角的Summary隨便填寫即可，點(diǎn)擊Commit to master 繼續(xù)點(diǎn)擊Fetch origin，這時(shí)當(dāng)你打開自己的****.github.io/文件夾名稱（英文格式）
你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)訪問成功。

最后，我們?cè)?code>****.github.io倉(cāng)庫(kù)下創(chuàng)建一個(gè)CNAME文件


填寫上自己的域名，在用自己的域名訪問如whd.fun/love我的域名是whd.fun，表白網(wǎng)頁(yè)在love文件夾下，這樣就成功了。（最后不要忘了將自己的域名解析到151.101.100.133）不然是無法成功的，域名解析在阿里云的控制臺(tái)下設(shè)置。

我是彩蛋ヾ(^?^)?，一共12個(gè)表白網(wǎng)頁(yè)源碼提供給大家，下載地址https://github.com/wanghaodi/LoveSourceCode

小結(jié)

我在博客中的每篇文章都是我一字一句敲出來的，轉(zhuǎn)載的文章我也注明了出處，表示對(duì)原作者的尊重。同時(shí)也希望大家都能尊重我的付出。

最后，也希望大家關(guān)注我的個(gè)人博客 HD Blog

謝謝~