From 6defee35c383d740022651f58c5d951b107620f9 Mon Sep 17 00:00:00 2001 From: Madison Scott-Clary Date: Tue, 28 Jun 2022 17:38:00 -0700 Subject: [PATCH] update from sparkleup --- work/ctm-406.html | 44 ++-- work/ctm-514.html | 309 +++++++++++++++++++++++++++++ work/gitea-2.html | 203 +++++++++++++++++++ work/gitea-3.html | 279 ++++++++++++++++++++++++++ work/index.html | 7 +- writing/post-self/mitzvot/034.html | 4 +- 6 files changed, 821 insertions(+), 25 deletions(-) create mode 100644 work/ctm-514.html create mode 100644 work/gitea-2.html create mode 100644 work/gitea-3.html diff --git a/work/ctm-406.html b/work/ctm-406.html index 7a4d9e944..5c75da796 100644 --- a/work/ctm-406.html +++ b/work/ctm-406.html @@ -104,7 +104,7 @@

Browser rendering of access.html page

We’ll be using the different methods that we outlined in the Overview above to access the available elements in the file.

Accessing Elements by ID

-

The easiest way to access a single element in the DOM is by its unique ID. We can grab an element by ID with the getElementById() method of the document object.

+

The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object.

document.getElementById();
@@ -125,10 +125,10 @@ const demoId = document.getElementById(‘demo’);

<div id="demo">Access me by ID</div> -

We can be sure we’re accessing the correct element by changing the border property to purple.

+

You can be sure you’re accessing the correct element by changing the border property to purple.

```custom_prefix(>) demoId.style.border = ‘1px solid purple’;

-
Once we do so, our live page will look like this:
+
Once you do so, your live page will look like this:
 
 ![Browser rendering of ID element styling](https://assets.digitalocean.com/articles/eng_javascript/dom/id-element.png)
 
@@ -136,7 +136,7 @@ demoId.style.border = ‘1px solid purple’;

 
 ## Accessing Elements by Class
 
-The [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute is used to access one or more specific elements in the DOM. We can get all the elements with a given class name with the [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) method.
+The [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute is used to access one or more specific elements in the DOM. You can get all the elements with a given class name with the [`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) method.
 
 ```js
 document.getElementsByClassName();
@@ -147,10 +147,10 @@ demoId.style.border = ‘1px solid purple’;

 <div class="demo">Access me by class (2)</div>
 

 
-
Let’s access our elements in the Console and put them in a variable called demoClass.

+
Access these elements in the Console and put them in a variable called demoClass.

 
```custom_prefix(>)
 const demoClass = document.getElementsByClassName(‘demo’);

-
At this point, you might think you can modify the elements the same way you did with the ID example. However, if we try to run the following code and change the `border` property of the class demo elements to orange, we will get an error.
+
At this point, it might be tempting to modify the elements the same way you did with the ID example. However, if you try to run the following code and change the `border` property of the class demo elements to orange, you will get an error.
 
 ```custom_prefix(>)
 demoClass.style.border = '1px solid orange';
@@ -160,7 +160,7 @@ const demoClass = document.getElementsByClassName(‘demo’);

 Uncaught TypeError: Cannot set property 'border' of undefined
 

 
-
The reason this doesn’t work is because instead of just getting one element, we have an array-like object of elements.

+
The reason this doesn’t work is because instead of just getting one element, you have an array-like object of elements.

 
```custom_prefix(>)
 console.log(demoClass);

 

@@ -168,26 +168,26 @@ console.log(demoClass);

 
 
[secondary_label Output]
 (2) [div.demo, div.demo]

-
[JavaScript arrays](https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript) must be accessed with an index number. We can therefore change the first element of this array by using an index of `0`.
+
[JavaScript arrays](https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript) must be accessed with an index number. You can change the first element of this array by using an index of `0`.
 
 ```custom_prefix(>)
 demoClass[0].style.border = '1px solid orange';
 

 
-
Generally when accessing elements by class, we want to apply a change to all the elements in the document with that particular class, not just one. We can do this by creating a for loop, and looping through every item in the array.  

+
Generally when accessing elements by class, we want to apply a change to all the elements in the document with that particular class, not just one. You can do this by creating a for loop, and looping through every item in the array.  

 
```custom_prefix(>)
 for (i = 0; i < demoClass.length; i++) {
   demoClass[i].style.border = ‘1px solid orange’;
 }

-
When we run this code, our live page will be rendered like this:
+
When you run this code, your live page will be rendered like this:
 
 ![Browser rendering of class element styling](https://assets.digitalocean.com/articles/eng_javascript/dom/class-element.png)
 
-We have now selected every element on the page that has a `demo` class, and changed the `border` property to `orange`.
+You have now selected every element on the page that has a `demo` class, and changed the `border` property to `orange`.
 
 ## Accessing Elements by Tag
 
-A less specific way to access multiple elements on the page would be by its HTML tag name. We access an element by tag with the [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) method.
+A less specific way to access multiple elements on the page would be by its HTML tag name. You access an element by tag with the [`getElementsByTagName()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) method.
 
 ```js
 document.getElementsByTagName();
@@ -198,7 +198,7 @@ for (i = 0; i < demoClass.length; i++) {
 <article>Access me by tag (2)</article>
 

 
-
Just like accessing an element by its class, getElementsByTagName() will return an array-like object of elements, and we can modify every tag in the document with a for loop.

+
Just like accessing an element by its class, getElementsByTagName() will return an array-like object of elements, and you can modify every tag in the document with a for loop.

 
```custom_prefix(>)
 const demoTag = document.getElementsByTagName(‘article’);

 
for (i = 0; i < demoTag.length; i++) {
@@ -218,31 +218,31 @@ const demoTag = document.getElementsByTagName(‘article’);

 $('#demo'); // returns the demo ID element in jQuery
 

 
-
We can do the same in plain JavaScript with the querySelector() and querySelectorAll() methods.

+
You can do the same in plain JavaScript with the querySelector() and querySelectorAll() methods.

 
document.querySelector();
 document.querySelectorAll();
 

 
-
To access a single element, we will use the querySelector() method. In our HTML file, we have a demo-query element

+
To access a single element, you can use the querySelector() method. In our HTML file, we have a demo-query element

 
<div id="demo-query">Access me by query</div>
 

 
-
The selector for an id attribute is the hash symbol (#). We can assign the element with the demo-query id to the demoQuery variable.

+
The selector for an id attribute is the hash symbol (#). You can assign the element with the demo-query id to the demoQuery variable.

 
```custom_prefix(>)
 const demoQuery = document.querySelector(‘#demo-query’);

-
In the case of a selector with multiple elements, such as a class or a tag, `querySelector()` will return the first element that matches the query. We can use the [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method to collect all the elements that match a specific query.
+
In the case of a selector with multiple elements, such as a class or a tag, `querySelector()` will return the first element that matches the query. You can use the [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method to collect all the elements that match a specific query.
 
-In our example file, we have two elements with the `demo-query-all` class applied to them.
+In the example file, you have two elements with the `demo-query-all` class applied to them.
 
 ```html
 <div class="demo-query-all">Access me by query all (1)</div>
 <div class="demo-query-all">Access me by query all (2)</div>
 

 
-
The selector for a class attribute is a period or full stop (.), so we can access the class with .demo-query-all.

+
The selector for a class attribute is a period or full stop (.), so you can access the class with .demo-query-all.

 
```custom_prefix(>)
 const demoQueryAll = document.querySelectorAll(‘.demo-query-all’);

-
Using the `forEach()` method, we can apply the color `green` to the `border` property of all matching elements.
+
Using the `forEach()` method, you can apply the color `green` to the `border` property of all matching elements.
 
 ```custom_prefix(>)
 demoQueryAll.forEach(query => {
@@ -254,7 +254,7 @@ const demoQueryAll = document.querySelectorAll(‘.demo-query-all’);With querySelector(), comma-separated values function as an OR operator. For example, querySelector('div, article') will match div or article, whichever appears first in the document. With querySelectorAll(), comma-separated values function as an AND operator, and querySelectorAll('div, article') will match all div and article values in the document.

 
Using the query selector methods is extremely powerful, as you can access any element or group of elements in the DOM the same way you would in a CSS file. For a complete list of selectors, review CSS Selectors on the Mozilla Developer Network.

 
Complete JavaScript Code

-
Below is the complete script of the work we did above. You can use it to access all the elements on our example page. Save the file as access.js and load it in to the HTML file right before the closing body tag.

+
Below is the complete script of the work you did above. You can use it to access all the elements on our example page. Save the file as access.js and load it in to the HTML file right before the closing body tag.

 
[label access.js]
 // Assign all elements
 const demoId = document.getElementById('demo');
@@ -338,7 +338,7 @@ const demoQueryAll = document.querySelectorAll(‘.demo-query-all’);In this tutorial, we went over 5 ways to access HTML elements in the DOM — by ID, by class, by HTML tag name, and by selector. The method you will use to get an element or group of elements will depend on browser support and how many elements you will be manipulating. You should now feel confident to access any HTML element in a document with JavaScript through the DOM.

             
             

-                
Page generated on 2022-06-22

+                
Page generated on 2022-06-28

             

         
         
+    
+
diff --git a/work/gitea-2.html b/work/gitea-2.html
new file mode 100644
index 000000000..22cf33623
--- /dev/null
+++ b/work/gitea-2.html
@@ -0,0 +1,203 @@
+
+
+    
+        Zk | gitea-2
+        
+        
+        
+    
+    
+        

+            

+                
Zk | gitea-2

+            

+            

+                
Gitea is a source code repository based on the version control system, Git. While there are several self-hosted solutions available such as GitLab and Gogs, Gitea has the benefit of being light-weight and easy to run on a small server.

+
However, having a small server, especially in the realm of VPSes, often means being limited on space. Thankfully, many hosting providers also offer additional storage in the form of block storage or networked file storage (NFS). This gives small and medium businesses the option to save money on smaller VPS hosts for their applications while not sacrificing storage.

+
With Gitea and the ability to decide where your source code is stored, it’s easy to ensure that your projects and files have room to expand.

+
Prerequisites

+
Before you get started, you will need the following:

+
+
Step 1 — Mounting a Linux Volume

+
A volume can take many different forms. It could be an NFS volume, which is storage available on the network provided via a file share. Another possibility is that it takes the form of block storage via a service such as DigitalOcean’s Volumes or Amazon’s EBS. In both cases, storage is mounted on a system using the mount command.

+
These volumes will be visible as a device, files which live in /dev. These files are how the kernel communicates with the storage devices themselves, not actually used for storage. In order to be able to store files on the storage device, you will need to mount them using the mount command.

+
First, you will need to create a mount point — that is, a folder which will be associated with the device, such that data stored within it winds up stored on that device. Mount points for storage devices such as this typically live in the /mnt directory.

+
Create a mount point named gitea as you would create a normal directory using the mkdir command:

+
sudo mkdir /mnt/gitea
+

+
+
From here, we can mount the device to that directory in order to use it to access that storage space. Use the mount command to mount the device:

+
sudo mount -o defaults,noatime /dev/disk/by-id/<^>your_disk_id<^> /mnt/gitea
+

+
+
This command mounts the device specified by its ID to /mnt/gitea. The -o option specifies the options used when mounting. In this case, you are using the default options which allow for mounting a read/write file system, and the noatime option specifies that the kernel shouldn’t update the last access time for files and directories on the device in order to be more efficient.

+
Now that you’ve mounted your device, it will stay mounted as long as the system is up and running. However, as soon as the system restarts, it will no longer be mounted (though the data will remain on the volume), so you will need to tell the system to mount the volume as soon as it starts using the /etc/fstab (‘file systems table’) file, which lists the available file systems and their mount points in a simple tab-delimited format.

+
Using echo and tee, add a new line to the end of /etc/fstab:

+
echo '/dev/disk/by-id/<^>your_disk_id<^> /mnt/gitea ext4 defaults,nofail,noatime 0 0' | sudo tee /etc/fstab
+

+
+
This command appends the string /dev/disk/by-uid/<^>your_disk_id<^> to the fstab file and to your screen. As with the mount command above, it mounts the device onto the mount point using the defaults, nofail, and noatime options. The string ext4 between the mount point and options specifies the file system type, ext4 in this case, though depending on your volume’s file system type, it may be something like xfs or nfs; to check which type your volume uses, run the mount command with no options:

+
mount
+

+
+
This will provide you with a line of output for every mounted file system. Since you just mounted yours, it will likely be the last on the list, and look something like this:

+
/dev/sda on /mnt/gitea type ext4 (rw,noatime,discard)
+

+
+
which shows that the file system type is ext4.

+
Once your changes have been made to /etc/fstab, the kernel will mount your Linux volume on boot.

+
<$>[note]
+Note: Storage devices on Linux are very flexible and come in all different types, from a networked file system (NFS) to a plain old hard drive. To learn more about block storage and devices in Linux, you can read up more about storage concepts here.
+<$>

+
Step 2 — Configuring Gitea to Store Data on a Linux Volume

+
Gitea maintains all of its repositories in a central location. This includes repositories from all users and organizations. Unless configured otherwise, all information is kept in a single directory. This directory is named data in default installations. For the purposes of this demo, we will be using a version of Gitea running on Docker as in the tutorial linked above.

+
First of all, let’s see what this data directory contains. You can do this by moving to the data directory and running the ls command. Using the -l format will tell us more information about the files:

+
cd gitea
+ls -l
+

+
+
This should provide a listing that looks something like this:

+
[secondary_label Output]
+total 20
+drwxr-xr-x  5 root  root  4096 Jun 23 22:34 ./
+drwxrwxr-x  3 sammy sammy 4096 Jun 26 22:35 ../
+drwxr-xr-x  5 git   git   4096 Jun 23 22:42 git/
+drwxr-xr-x 12 git   git   4096 Jun 26 22:35 gitea/
+drwx------  2 root  root  4096 Jun 23 22:34 ssh/
+

+
+
Let’s break down the output of this command. It lists one file or directory per line. In this case, it lists five directories. The entry for . is a special entry that just means the current directory, and .. stands for the directory one level up. You can see that the current directory is owned by the root user, which is the case in this instance because Docker runs as a privileged user, and the directory one level up is owned by sammy.

+
The git directory is important to us because it contains all of the repositories that we might want to store on a separate volume. Within it are two directories of note: the repositories directory contains the git repositories managed by Gitea sorted by user/organization, and the lfs directory contains data for Git’s Large File Storage functionality. The gitea directory contains plenty of information that Gitea uses in the background, including archives of old repositories, as well the database that contains information such as users and repository information used by the web service. The ssh directory contains various SSH keypairs that are used in Gitea’s operation.

+
Given that all of the information stored in this directory is important to us, we will want to include the entire directory’s contents on our attached volume.

+
Setting Up a New Installation of Gitea

+
If you are starting with a brand new installation of Gitea, you can specify where all of your information is stored during the configuration process. For example, if you are setting Gitea up using Docker Compose, you can map the volumes to your attached volume.

+
Open up the docker-compose.yml file with your preferred text editor. The following example uses nano. Search for the volumes entry in the compose file and modify the mapping on the left side of the : to point to appropriate locations on your Linux volume for the Gitea data directory:

+
[label docker-compose.yml]
+...
+
+    volumes:
+      - <^>/mnt/gitea<^>:/data
+      - /home/git/.ssh/:/data/git/.ssh
+      - /etc/timezone:/etc/timezone:ro
+      - /etc/localtime:/etc/localtime:ro
+
+...
+

+
+
<$>[warning]
+Warning: SSH servers look for the .ssh directory, which contains all of the SSH keys that Gitea will use, in the home directory of the Git user (git, in this case), so it is not advised to move the mount for this Docker volume. In order to have this location backed up on your Linux volume, it would be best to use another solution such as a cron job to back up the directory. For more information on using cron to manage scheduled tasks, see this tutorial.
+<$>

+
When you run docker-compose and Gitea installs, it will use your Linux volume to store its data.

+
If you are not using Docker volumes to manage the locations of your data — for example, if you are installing Gitea on your server via the binary releases per these instructions from Gitea — then you will need to modify the locations within the configuration file (usually /etc/gitea/app.ini) when you are setting all of the values. For instance, you might set them as follows:

+
[label app.ini]
+...
+
+# If you are using SQLite for your database, you will need to change the PATH
+# variable in this section
+[database]
+...
+PATH = <^>/mnt/gitea<^>/gitea.db
+
+[server]
+...
+LFS_CONTENT_PATH = <^>/mnt/gitea<^>/lfs
+
+[repository]
+ROOT = <^>/mnt/gitea<^>/gitea-repositories
+
+...
+

+
+
<$>[note]
+Note: Ensure that your git user has write access to this location. You can read up on Linux permissions here.
+<$>

+
Moving an Existing Installation of Gitea

+
If you already have an instance of Gitea installed and running, you will still be able to store your data on a separate Linux volume, but it will require some care in ensuring that all of your data remains both safe and accessible to Gitea.

+
<$>[note]
+Note: As with any operation involving your data, it is important to ensure that you have an up-to-date backup of everything. In this case, this means a back up of all of the files in your data directory (the SSH files, the gitea-repositories and lfs directories, the database, and so on) to a safe location. 
+<$>

+
There are two options for moving your data to a new volume. The first way is to copy your Gitea data to a secondary location, then turn the original location into a mount point for your Linux volume. When you copy your data back into that location, you will be copying it onto that volume, and no changes will be required within Gitea itself; it will simply continue as it did before. If, however, you do not want to mount the entire device to that destination (for example, if your Gitea data will not be the only thing on that volume), then a second option is to move all of your Gitea data to a new location on that volume and instruct Gitea itself to use that location.

+
No matter which option you choose, first, stop the Gitea web service.

+
If you are using Gitea installed via Docker Compose, use docker-compose to stop the service. While inside the same directory containing the docker-compose.yml file, run:

+
docker-compose down
+

+
+
If you have installed it as a Linux service, use the systemctl command:

+
sudo systemctl stop gitea
+

+
+
Once Gitea has been stopped, move the entire contents of the data directory to the mount point made in step 1:

+
mv * /mnt/gitea
+

+
+
Ensure that all files have been moved by listing all of the current directory’s contents:

+
ls -la
+

+
+
You should only see the current and parent directory entries. The result should look something like this:

+
total 8
+drwxrwxr-x 2 mscottclary mscottclary 4096 Jun 27 13:56 ./
+drwxr-xr-x 7 mscottclary mscottclary 4096 Jun 27 13:56 ../
+

+
+
Once all of the data has been moved, change to that directory:

+
cd /mnt/gitea
+

+
+
Using ls, ensure that everything looks correct. As before, you should see the ssh, git, and gitea directories. If you are using SQLite as a database to manage Gitea, you should also see a file named gitea.db in the gitea directory.

+
When you’re sure that all data has been moved, it’s time to mount the Linux volume to the data directory. 

+
First, move to the parent directory of the data directory.

+
cd <^>/home/sammy/gitea/..<^>
+

+
+
As before, use the mount command, but this time, use the directory you just emptied as the destination:

+
sudo mount -o defaults,noatime /dev/disk/by-id/<^>your_disk_id<^> gitea
+

+
+
Now, when you look inside that directory, you should see all of your files in place:

+
ls -la gitea
+

+
+
This command should output the expected information. Note that, depending on your volume’s file system type, you may see an additional directory named lost+found; this is normal and part of everyday file system use.

+
total 36
+drwxr-xr-x  6 root        root         4096 Jun 27 13:58 ./
+drwxrwxr-x  3 mscottclary mscottclary  4096 Jun 27 02:23 ../
+drwxr-xr-x  5 git         git          4096 Jun 23 22:42 git/
+drwxr-xr-x 12 git         git          4096 Jun 27 00:00 gitea/
+drwx------  2 root        root        16384 Jun 27 03:46 lost+found/
+drwx------  2 root        root         4096 Jun 23 22:34 ssh/
+

+
+
As mentioned, if you would like Gitea to use a directory within the Linux volume, there is an additional step you need to complete before bringing Gitea back up. For example, say that you want to use a folder named scm on your volume mounted on /mnt/gitea. After moving all of your Gitea data to /mnt/gitea/scm, you will need to create a symbolic link from your old data directory to the new one. For this you will use the ln command:

+
sudo ln -s /mnt/gitea/scm gitea
+

+
+
At this point, you can restart Gitea. If you are using Gitea as a Linux service, run:

+
sudo systemctl restart gitea
+

+
+
If you are running Gitea as a Docker container using Docker Compose, run:

+
docker-compose up -d
+

+
+
Now that everything is up and running, visit your Gitea instance in the browser and ensure that everything works as expected. You should be able to create new objects in Gitea such as repositories, issues, and so on. If you set Gitea up with an SSH shim, you should also be able to check out and push to repositories using git clone and git push.

+
Conclusion

+
In this tutorial, you moved all of your Gitea data to a Linux volume. Volumes such as these are very flexible and provide many benefits.such as allowing you to store all of your data on larger disks, RAID volumes, networked file systems, or using block storage such as DigitalOcean Volumes or Amazon EBS to reduce storage expenses. It also allows you to snapshot entire disks for backup so that you can restore their contents in event of a catastrophic failure.

+            

+            

+                
Page generated on 2022-06-28

+            

+        

+        
+    
+
diff --git a/work/gitea-3.html b/work/gitea-3.html
new file mode 100644
index 000000000..8fd92c830
--- /dev/null
+++ b/work/gitea-3.html
@@ -0,0 +1,279 @@
+
+
+    
+        Zk | gitea-3
+        
+        
+        
+    
+    
+        

+            

+                
Zk | gitea-3

+            

+            

+                
How To Deploy a Static Website from Gitea Using Git Hooks

+
Introduction

+
The popular source code management system Git is quite flexible when it comes to allowing you to perform various tasks when actions are taken on a repository. For example, you might want to send an email when a feature branch is merged into your main branch, or log various Git actions to a file for tracking.

+
These actions are called hooks, and there are several that you can use for various steps along the way to perform additional work within your Git workflow. For example:

+
    
+
  • post-receive hooks can be used to perform actions when a commit is pushed to the repository and are useful for CI/CD.
    • 
+
  • post-merge hooks can be used to perform actions after a merge has been completed and are useful for logging and notifications.
    • 
+
  • post-checkout hooks can be used to perform actions after you run git checkout and are useful for setting up project environments.
    • 
+

+
For this tutorial, we will be looking at using the post-receive hook. A common usage for the hook is running some form of continuous integration or deployment. This might mean running tests or deploying a project. For this example, we will be automatically deploying changes to a static HTML site served by Nginx.

+
Prerequisites

+
Gitea is a lightweight and flexible source code management system that will be used for the examples here, so before beginning this tutorial, you should have the following:

+
+
Step 1 — Creating a Static HTML Project in Gitea

+
To begin with, you will need a repository set up in Gitea. Create a new repository using the + button in the upper right corner of the Gitea page. Name it something memorable such as the domain name that it will be deployed to. Fill out the rest of the new repository information and click Create Repository.

+
Creating a new repository

+
For this tutorial, you’ll be setting up a static site at static.<^>your_domain<^>, but be sure to replace this with your final site’s domain. Now, wherever you plan on developing, check out that repository using git clone:

+
git clone git@<^>your_domain<^>:<^>username<^>/static.<^>your_domain<^>
+

+
+
Move into that directory using cd:

+
cd static.<^>your_domain<^>
+

+
+
Now, create a file named index.html which will be served by Nginx. The following example uses nano. This file will contain a little bit of text that we can view in the browser.

+
nano index.html
+

+
+
Within that file, add a snippet of HTML that you will recognize:

+
[label index.html]
+<html>
+    <head>
+        <title>Testing Gitea</title>
+    </head>
+    <body>
+        <h1>It works!</h1>
+    </body>
+</html>
+

+
+
Save and close the file. If you used nano to edit the file, you can do so by pressing Ctrl + X,  Y, and then Enter.

+
Now, add the file to the git working tree:

+
git add index.html
+

+
+
Now that the file is added, commit your changes:

+
git commit -m "Added index.html"
+

+
+
Push your changes up to your Gitea repository:

+
git push origin main
+

+
+
<$>[note]
+Note: In this example, we are working on the branch named main. Your default branch may be named something else such as master. In order to find out the name of your current branch, you can run git branch.
+<$>

+
Step 2 — Creating a Static HTML Site in Nginx

+
Now, let’s set up Nginx to serve our static site. Create a new file in /etc/nginx/sites-available using your text editor:

+
sudo nano /etc/nginx/sites-available/static.<^>your_domain<^>
+

+
+
In this file, enter the following:

+
[label /etc/nginx/sites-available/static.<^>your_domain<^>]
+server {
+    server_name static.<^>your_domain<^>;
+    listen 80;
+
+    root /var/www/static.<^>your_domain<^>;
+
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+    location /.git {
+        return 404;
+    }
+}
+

+
+
This server block instructs Nginx to listen on the standard HTTP port 80 for requests to static.<^>your_domain<^>. When it receives a request, it tries to find a file matching that request in /var/www/static.<^>your_domain<^>. It will first try looking for the file named (for instance, if you visit static.<^>your_domain<^>/shark.jpg, it will try to find /var/www/static.<^>your_domain<^>/shark.jpg). If that does not exist, it will append a / to the end of the file name to serve a directory or the file named index.html. Finally, if none of those work, it will serve a 404 Not Found error.

+
We also don’t want anyone accessing our .git directory, so the next location block instructs Nginx to return a 404 should someone try.

+
Now, link this file from sites-available to sites-enabled:

+
sudo ln -s /etc/nginx/sites-available/static.<^>your_domain<^> /etc/nginx/sites-enabled/static.<^>your_domain<^>
+

+
+
In order to make sure everything looks good, you can test the new configuration:

+
sudo nginx -t
+

+
+
If all has gone well, you should see something like the following:

+
[secondary_label Output]
+nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
+nginx: configuration file /etc/nginx/nginx.conf test is successful
+

+
+
Restarting the server will make these changes live.

+
sudo systemctl restart nginx
+

+
+
We need to create the repository for there to be anything to serve, however. Move to /var/www where you can create the directory for hosting the site:

+
cd /var/www
+

+
+
Make the directory you specified in your server block above:

+
sudo mkdir static.<^>your_domain<^>
+

+
+
You will need to change the permissions on this directory so that both you and the git user have write access.

+
sudo chown <^>username<^>:git static.<^>your_domain<^>
+sudo chmod g+x static.<^>your_domain<^>
+

+
+
Move to that directory:

+
cd static.<^>your_domain<^>
+

+
+
Now that you have the directory set up, you can clone the repository into it. Rather than using SSH, which would require a key, you can use the file:// protocol for Git. This works because Nginx is running on the same server that the repository lives on. If the repository is public, you can also use the https:// protocol.

+
git clone file:///<^>path_to_gitea_installation<^>/repositories/sammy/static.<^>your_domain<^>.git .
+

+
+
It’s important to remember to add that . at the end of the git clone command, as this tells Git to check out the repository into the current directory rather than making a new one. Now, if you type ls, you should see the file index.html from  your repository, and if you visit the domain you set up, you should see your page rendered.

+
The static webpage

+
Step 3 — Using Git Hooks to Publish Changes

+
Now that Nginx is serving the site from our checked out repository, we can set up the post-receive hook to update the site.

+
Creating the Hook Script

+
Git hooks for Gitea live in the repository that Gitea serves from. These are located in the data directory, predictably within the repositories subdirectory. Move to your data directory using cd, then move to your repository’s hooks directory:

+
cd git/repositories/<^>username<^>/static.<^>your_domain<^>.git/hooks
+

+
+
If you list the files in this directory, you will see a whole host of sample scripts, plus a few directories:

+
[secondary_label Output]
+total 92
+drwxr-xr-x 6 git git 4096 Jun 27 17:29 ./
+drwxr-xr-x 7 git git 4096 Jun 27 17:43 ../
+-rwxr-xr-x 1 git git  478 Jun 27 17:29 applypatch-msg.sample*
+-rwxr-xr-x 1 git git  896 Jun 27 17:29 commit-msg.sample*
+-rwxr-xr-x 1 git git  376 Jun 27 17:29 post-receive*
+drwxr-xr-x 2 git git 4096 Jun 27 17:29 post-receive.d/
+-rwxr-xr-x 1 git git  189 Jun 27 17:29 post-update.sample*
+-rwxr-xr-x 1 git git  424 Jun 27 17:29 pre-applypatch.sample*
+-rwxr-xr-x 1 git git 1643 Jun 27 17:29 pre-commit.sample*
+-rwxr-xr-x 1 git git  416 Jun 27 17:29 pre-merge-commit.sample*
+-rwxr-xr-x 1 git git 1374 Jun 27 17:29 pre-push.sample*
+-rwxr-xr-x 1 git git 4898 Jun 27 17:29 pre-rebase.sample*
+-rwxr-xr-x 1 git git  376 Jun 27 17:29 pre-receive*
+drwxr-xr-x 2 git git 4096 Jun 27 17:29 pre-receive.d/
+-rwxr-xr-x 1 git git  544 Jun 27 17:29 pre-receive.sample*
+-rwxr-xr-x 1 git git 1492 Jun 27 17:29 prepare-commit-msg.sample*
+-rwxr-xr-x 1 git git  134 Jun 27 17:29 proc-receive*
+drwxr-xr-x 2 git git 4096 Jun 27 17:29 proc-receive.d/
+-rwxr-xr-x 1 git git 2783 Jun 27 17:29 push-to-checkout.sample*
+-rwxr-xr-x 1 git git  356 Jun 27 17:29 update*
+drwxr-xr-x 2 git git 4096 Jun 27 17:29 update.d/
+-rwxr-xr-x 1 git git 3650 Jun 27 17:29 update.sample*
+

+
+
For our purposes, we will be creating a new script within the post-receive.d directory. On Linux, configuration and scripts are usually stored in a directory such as /etc/apt or our hooks directory. However, if there are multiple configuration files or scripts, they may be divided up and placed in a *.d directory, and the service which uses them will read all of those files in list order.

+
Open a new file in post-receive.d for editing named deploy:

+
nano post-receive.d/deploy
+

+
+
This file can be any executable script. In our case, since we’ll just be running a simple git command, we’ll use a Bash script. Enter the following into that file:

+
[label post-receive.d/deploy]
+#!/bin/bash
+
+set -eux
+
+git --git-dir=/var/www/static.<^>your_domain<^>/.git --work-tree=/var/www/static.<^>your_domain<^>/ pull --ff-only
+

+
+
Let’s break this script down into its parts to understand what’s happening:

+
    
+
  • #!/bin/bash tells the shell to use the bash command to run the script.
    • 
+
  • set -eux specifies three options: e means that the script will exit on a failure, u means that unset variables will be an error, and x means that it will print the commands as it executes them. These options are good practice for preventing scripts from continuing to execute when there are errors.
    • 
+
  • The git command breaks down into git pull which pulls new changes from the repository, while the --work-tree and --git-dir options tell Git to use the .git directory within the checked out branch for all of its configuration. --ff-only instructs git pull to use fast-forward reconciliation when pulling new commits.
    • 
+

+
Once you’re done editing the script and have saved and closed it, use chmod to make the script executable:

+
chmod a+x post-receive.d/deploy
+

+
+
For Gitea Running in Docker

+
If Gitea is running in a Docker container — if, for instance, you deployed it using the Docker Compose method in the tutorial linked above — you will need to make a few changes to make the repository accessible from within the container. First, edit the docker-compose.yml file and move to the volumes: entry. Add a new line to that list:

+
[label docker-compose.yml]
+    volumes:
+      ...
+      <^>- /var/www/static.<^>your_domain<^>:/var/www/static.<^>your_domain<^><^>
+

+
+
This will mount that directory as a volume that the container can access. You will need to restart your Gitea containers:

+
docker-compose down
+docker-compose up
+

+
+
Next, you will need to change the remote URL for the repository to the proper location for within the Docker container.

+
git remote set-url origin file:///data/git/repositories/sammy/static.<^>your_domain<^>.git
+

+
+
Here, we’ve changed the original URL we used to check out the branch from /<^>path_to_gitea_installation<^>/repositories/sammy/static.<^>your_domain<^>.git to use /data/git/ as the path to the installation, as that is how the volume is mapped in docker-compose.yml. As always, be sure to use the username and repository name appropriate to your project.

+
Testing the post-receive Hook

+
Now, after Gitea receives a new commit and it’s written to disk, it will run this script to update the branch checked out in /var/www/static.<^>your_domain<^>. To test this out, change the index.html file on your local working directory to include a congratulations message. For example, change the file so that it resembles this:

+
[label index.html]
+<html>
+    <head>
+        <title>Testing Gitea</title>
+    </head>
+    <body>
+        <h1>It works!</h1>
+        <p>Congratulations on setting up a <code>post-receive</code> hook!
+    </body>
+</html>
+

+
+
After saving and exiting the file, commit your changes:

+
git commit -am "Added congratulations message"
+

+
+
And push your changes:

+
git push origin main
+

+
+
This time, you should see some additional output from Git. Because you set the -x option in our deploy script, you’ll see the output of that script during the process, prefixed with remote:.

+
[secondary_label Output]
+Enumerating objects: 5, done.
+Counting objects: 100% (5/5), done.
+Delta compression using up to 8 threads
+Compressing objects: 100% (2/2), done.
+Writing objects: 100% (3/3), 312 bytes | 312.00 KiB/s, done.
+Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
+remote: + cd /var/www/static.<^>your_domain<^>
+remote: + git --git-dir=/var/www/static.<^>your_domain<^>/.git pull --ff-only
+remote: From file:///data/git/repositories/<^>username<^>/static.<^>your_domain<^>
+remote:    28c52bf..95cde6f  main       -> origin/main
+remote: Updating 28c52bf..95cde6f
+remote: Fast-forward
+remote: . Processing 1 references
+remote: Processed 1 references in total
+To <^>your_domain<^>:<^>username<^>/static.<^>your_domain<^>.git
+   8eed10f..95cde6f  main -> main
+

+
+
When you visit your page in the browser, you should see your now congratulations message displayed.

+
Conclusion

+
In this tutorial, you learned how to use Git hooks in Gitea. While you used the post-receive hook to deploy a static website, there are many available hooks that can help you accomplish a wide variety of tasks during your Git workflow. For more information on these hooks, the Git manual has an in-depth chapter on using them.

+            

+            

+                
Page generated on 2022-06-28

+            

+        

+        
+    
+
diff --git a/work/index.html b/work/index.html
index 623f13602..db2d8a1e8 100644
--- a/work/index.html
+++ b/work/index.html
@@ -18,11 +18,16 @@
 
  • How to create temporary and permanent redirects with nginx
    • 
 
  • How to configure Nginx with SSL as a reverse proxy for Jenkins
    • 
 
  • How to Access Elements in the DOM
    • 
+
  • How to Use Struct Tags in Go
    • 
 
 
    New
    
+
             
             
    
-                
    Page generated on 2022-06-22
    
+                
    Page generated on 2022-06-28