How to use Gitee Pages to deploy static websites and interactive functions

Gitee is a very well-known Git code hosting platform. Not only can you manage code on Gitee, you can also deploy your own static website through Gitee Pages, which is very convenient. This article will introduce how to use Gitee Pages to deploy a static website and how to add interactive features to make the website more lively and interesting.

1. Create a Gitee Pages project

First you need to create a Pages project on Gitee. The specific operations are as follows:

1. Log in to the Gitee website and enter your personal homepage.
2. Click the "Create Warehouse" button.
3. Set the warehouse name, check the "Public" option, select the "Initialize README.md" option, and finally click the "Create Warehouse" button.
4. Enter the newly created warehouse page and click the "Settings" button.
5. Click the "Pages Service" tab and select the "Enable Pages Service" button.
6. Set the access path of the website and the default displayed page, for example, set it to "/my-website", the default displayed page is "index.html", and finally click the "Save" button.
7. Next, you can create a new folder locally and put the relevant files of the static website into this folder.
8. Open the command line locally, enter the folder you just created, and enter the following command:

git init
git add .
git commit -m "initial commit "

9. Connect to the Gitee repository and enter the following command:

git remote add origin [Gitee repository address]
git push -u origin master

10. After completing the above steps, refresh the Gitee warehouse page and you will see the deployed static website.

2. Add interactive functions

On the basis of a static website, adding interactive functions can make the website more lively and interesting. Here are two ways to add interactive functionality.

1. Using JavaScript

JavaScript is a scripting language that can achieve page interaction effects. You can add <script> tags in HTML files to write JavaScript code. </script>

For example, add the following code in HTML:

<button>点击按钮</button>
<script>
document.querySelector("#btn").addEventListener("click", function() {
alert("Hello World");
});
</script>

When the button is clicked, a "Hello World" prompt box will pop up.

After uploading the HTML file with JavaScript code added to the Gitee Pages project, you can see the effect on the website.

2. Use third-party plug-ins

In addition to JavaScript, you can also use third-party plug-ins to achieve interactive effects. The following takes adding a scroll bar as an example to introduce the method of using the iScroll plug-in.

1. Add the following code in HTML:

<div>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
<li>第六项</li>
<li>第七项</li>
<li>第八项</li>
<li>第九项</li>
<li>第十项</li>
</ul>
</div>
<script></script>
<script>
var myScroll = new IScroll(&#39;#scroller&#39;,{});
</script>

2. Upload the iScroll.min.js file to the Gitee Pages project.
3. Refresh the website and you will see the effect of adding scroll bars.

Summary:

Static websites can be easily deployed through Gitee Pages, and interactive functions can be added through JavaScript and third-party plug-ins to make the website more lively and interesting.

The above is the detailed content of How to use Gitee Pages to deploy static websites and interactive functions. For more information, please follow other related articles on the PHP Chinese website!