C
cat dog (running_in_the_storm)
Guest
Preface
I've been wanting to create a website for my independently developed app, AudioAndVideoEditor. Setting up a server, domain name, and developing the website from scratch is obviously expensive. GitHub offers free static web hosting, allowing you to launch your website in just a few steps (compared to developing a website from scratch). This article will explain how to use GitHub Pages, drawing on my own experience.
You're welcome to follow my GitHub Pages: https://ilovecat1949.github.io/AudioAndVideoEditor/ .It's an open-source Android audio and video editor that supports various audio and video features, including ffmpeg command-line functionality, video encoding and compression, format conversion, video cropping, and speed changes.
GitHub Pages advantages and limitations
Everyone knows that GitHub offers free code hosting, but not many people know that you can use GitHub Pages to build a personal website. Let me briefly explain the advantages and limitations of GitHub Pages.
- Zero cost. This is the most obvious advantage. No server, domain, or hosting fees are required.
- Easy to use. No development knowledge is required; you can build a website using ready-made templates. Especially with the addition of AI programming, it's even easier to customize your desired interface.
- Stability and reliability. GitHub is reliable. Once you build your website, you don't have to worry about security issues like website takedowns or hacker attacks. GitHub's global CDN acceleration ensures lightning-fast page loads and supports HTTPS for secure encryption.
- GitHub integration: Websites are directly hosted on GitHub repositories, making version control, collaboration, and sharing easy.
- With a GitHub Pages website, you can create an online resume for job hunting. According to the GitHub Terms of Service, our use of GitHub Pages is subject to the following restrictions:
Each GitHub account can only create one user or organization site.
A GitHub Pages page has a URL formatted as username.github.io/projectname or organization.github.io/projectname. This restriction means that an account can only have one GitHub Pages site with username.github.io or organization.github.io. You can create different GitHub Pages for multiple projects, but they all have the same prefix: username.github.io or organization.github.io.
The recommended size limit for source code repositories is 1 GB, and published sites cannot exceed 1 GB.
Deployment timeout is 10 minutes.
There is a soft limit of 100 GB of monthly bandwidth.
A maximum of 10 builds per hour is allowed (sites published using custom GitHub Actions workflows are exempt from this limit).
Using GitHub Pages' default build method (for example, through the Publish Source option in GitHub Pages settings), your site can only trigger a maximum of 10 builds per hour.
However, if you use a custom GitHub Actions workflow to build and publish your site, this limit does not apply. In other words, custom GitHub Actions workflows can bypass the 10 builds per hour limit, allowing you to build and release your site more frequently as needed.
Rate limiting may apply to ensure quality of service, and triggering a rate limit will result in an HTTP status code 429 response.
Additionally, GitHub Pages is not intended for commercial transactions, SaaS services, or other sensitive transactions (such as sending passwords or credit card information).
GitHub Pages Setup Guide
GitHub Pages relies on a public GitHub repository. Therefore, before building GitHub Pages, you'll need to register for a GitHub account and create a GitHub repository. I'll be building on my open-source project, AudioAndVideoEditor. Once you have a repository, follow the steps below to activate GitHub Pages.
Go to your repository and click the "Settings" tab.
Find the "Pages" option in the left menu.
Under "Source," select "Deploy from a branch," then select the "main" branch (the default), and click "Save."
After a few minutes, refresh the page. You'll see the generated website URL: https://username.github.io/projectname. For example, mine is https://ilovecat1949.github.io/AudioAndVideoEditor/.
GitHub repositories typically have a README file. If no other webpage files are present, GitHub Pages will display your README file. To build a fancy and attractive interface, we usually need to create or upload a webpage file. Here's how.
In the repository (root directory), click "Add file" > "Create new file."
Name the file "index.html" and enter the following simple code:
Code:
<!DOCTYPE html>
<html>
<head>
<title>ζηδΈͺδΊΊη½ι‘΅</title>
</head>
<body>
<h1>ζ¬’θΏζ₯ε°ζηδΈηοΌ</h1>
<p>θΏιζ―ζηδ»η»οΌηη±ηΌη¨γζ
θ‘εεε‘γ</p>
</body>
</html>Commit your code, and refresh the site after a few seconds to see the updated content. This time, the contents of index.html are displayed.
Okay, that's the general idea and steps for using GitHub Pages. But it's obviously not enough to create a polished interface. Next, let's explore building a blog using a Jekyll template.
Branch Build and Actions Build
Before using Jekyll, we need to understand some basics about GitHub Pages builds. In the steps above, we can either choose a code branch as the source for the build or use GitHub Actions.
Building from a branch is the most traditional and simplest method. It works by specifying a branch (usually gh-pages or main), and GitHub Pages automatically uses the content from that branch as your website. Its advantages are simplicity and zero configuration. You simply push your static website files (HTML, CSS, and JS) directly to that branch (usually in the root directory). Its disadvantage is that there's no automated build process. If you use Jekyll, you'll need to first run jekyll build locally to generate a _site directory, then push all the files in _site to the GitHub Pages branch (usually in the root directory). This is tedious and prone to errors.
Building with Actions (GitHub Actions) is a more modern and powerful method. How it works is that you create a GitHub Actions workflow. When code is pushed to a specified branch, this workflow automatically runs, completes the Jekyll build for you in the cloud, and publishes the generated website files to GitHub Pages. Its advantage is that it is fully automated. You only need to push your Jekyll source code (such as .md files and layout files) to the repository, and all the rest of the work (building and deploying) is automatically completed by GitHub Actions. You don't need to run jekyll build locally. The disadvantage is that it requires writing and configuring a YAML workflow file, which may be a bit complicated for beginners. However, when you choose GitHub Actions to build, GitHub will prompt you to select Jekyll Workflow for the build. Just follow GitHub's prompts and it will automatically generate a .github/workflows/jekyll-gh-pages.yml workflow file for you.
Building with a branch is like manually uploading your project. You prepare the final product and then submit it to GitHub. The HTML, Markdown, and other files in the project's root directory serve as the source code for the webpage.
Building with Actions is like hiring a full-time automated worker. You provide the raw material (the Jekyll source code) and it completes all the work for you and delivers the final product. The code generated by the build is stored in the _site directory, and the files in the _site directory serve as the source code for the webpage.
I personally chose to build with Actions. I built the webpage locally using Jekyll build for debugging, then uploaded it to GitHub, triggering the workflow to build and publish it again.
GitHub Pages+Jekyll
First, let's talk about Jekyll. Jekyll is a powerful static website generator. It automatically generates a complete static website from your Markdown articles, combined with beautifully designed themes and templates. You focus on creating your content, while Jekyll handles the rest of the polish and layout. We no longer need to fiddle with Markdown to generate web pages; powerful AI programming can now directly generate web files that meet our needs. What we really need are Jekyll's themes, templates, local preview, and real-time debugging features.
Installing Jekyll
It's best to develop and test locally before uploading. To use Jekyll locally, you need to install some dependencies.
Jekyll is developed in Ruby, so you need to install Ruby and Bundler first.
Installing Ruby:
Windows users: We recommend using RubyInstaller for Windows. During installation, select the "Add Ruby executables to your PATH" option.
macOS users: Ruby is usually pre-installed. You can check the version by typing "ruby -v" in the terminal.
Linux users: Use a package manager (e.g., "sudo apt-get install ruby-full").
Installing Bundler:
Bundler is a Ruby package manager that manages and installs the dependencies required for Jekyll projects. In a terminal or command prompt, run the following Bash command:
Code:
gem install bundler jekyllThis command will install both Bundler and Jekyll.
The above installation is expected to take up 1GB of disk space.
Clone your repository locally
Now, you'll need to clone the website repository you created on GitHub to your local computer.
Install Git: If you don't have Git installed on your computer, you'll need to install it first.
Clone the repository: Open a terminal or Git Bash, navigate to the folder where you want to store your project, and run the following command:
Code:
git clone https://github.com/YourGitHubusername/projectname.git
cd projectnameOnce you're in your project folder, you can start your website locally.
Install dependencies: Run the following command to install the project's required dependencies (including Jekyll and the theme plugin):
Code:
bundle installThe first run may take some time.
Starting a local server: Now, run the following command to start a local server:
Code:
bundle exec jekyll serveAfter the command completes, you'll see a local URL in your terminal, typically http://127.0.0.1:4000. Open this URL in your browser and you'll see your website.
Now, navigate to your repository directory and you'll notice a number of new files and directories. In the root directory, there's a file called index_markdown.md, which serves as the default entry point for the entire website. As mentioned above, we won't bother with generating Markdown pages. Instead, we'll change index_markdown.md to index_markdown.txt, which will disable it. Then, add an index.html file (if one isn't already there) so that Jekyll uses it as the entry point for the website.
Then, you just need to let AI write web page code based on Jekyll to meet your needs.
After writing the code, you can preview the effect locally and submit the code if it is OK.
Code:
git add .
git commit -m "Your submission information"
git push origin mainAfter submitting, GitHub Pages will automatically deploy the website for you again (selecting Actions Build will rebuild and then deploy it), so that your online website is completely synchronized with the local one.
Summarize
Using GitHub Pages, you can create a free website to promote yourself, your projects, and your products, creating a personal "digital business card" that might even add a splash to your resume. Paired with the ever-popular AI programming, creating a satisfying static webpage is easy. Open GitHub now and start your creative journey!
Finally, I welcome everyone to follow my GitHub Pages: https://ilovecat1949.github.io/AudioAndVideoEditor/ It's an open-source audio and video editor for Android, supporting various audio and video features, such as the ffmpeg command line, video encoding and compression, format conversion, video cropping, and speed changes.
reference
Continue reading...
