Docs-as-Code with Sphinx and Codeberg Pages (#198)
How to implement [Docs-as-Code](https://docs-as-co.de/) with the help of Sphinx and Codeberg Pages. Co-authored-by: Faycal Alami-Hassani <ka2in@protonmail.com> Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/198 Co-authored-by: ka2in <ka2in@noreply.codeberg.org> Co-committed-by: ka2in <ka2in@noreply.codeberg.org>
This commit is contained in:
ka2in
René Schaar
parent
0e30fb4fe8
commit
93975e5d93
4 changed files with 271 additions and 2 deletions
196
content/codeberg-pages/examples/docs-as-code.md
Normal file
196
content/codeberg-pages/examples/docs-as-code.md
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
---
|
||||
eleventyNavigation:
|
||||
key: DocsAsCode
|
||||
title: "Example: Docs as Code with Sphinx"
|
||||
parent: CodebergPages
|
||||
order: 101
|
||||
---
|
||||
|
||||
Docs-as-Code (also known as “Documentation as Code”) refers to the concept of treating documentation as a codebase, i.e. integrating the documentation process in the toolchains and workflows used by software development teams.
|
||||
|
||||
Docs-as-Code involves implementing versioning capabilities for your documentation projects and authoring your content with plain text markup languages such as Markdown or reStructuredText, among other things.
|
||||
|
||||
To find out more about Docs-as-Code, head over to the official website: [https://docs-as-co.de/](https://docs-as-co.de/).
|
||||
|
||||
Whether you are a single technical communicator or a member of a larger documentation team, you can perfectly apply the Docs-as-Code approach to your documentation projects.
|
||||
|
||||
This guide will show you how to implement Docs-as-Code on a Linux machine using [“Sphinx”](https://www.sphinx-doc.org/en/master/) as a documentation generator, [“Git”](https://ka2in.codeberg.page/gitinminutes.html) as a version control system and [“Codeberg Pages”](https://docs.codeberg.org/codeberg-pages/) as a static website hoster.
|
||||
|
||||
> **Note**<br />Despite the fact that we are using Sphinx in this particular case, please note that you can easily apply the instructions provided below to any other static site generatior (SSG) such as [Eleventy](https://www.11ty.dev/) or [Hugo](https://gohugo.io/), etc.
|
||||
|
||||
## Building documentation with Sphinx
|
||||
|
||||
Initially developed to generate Python documentation, Sphinx is now widely used by technical communicators and software developers to create technical and software documentation.
|
||||
|
||||
Sphinx uses [reStructuredText](https://docutils.sourceforge.io/docs/user/rst/quickref.html) as a markup language to generate documentation content. Among further advantages, Sphinx allows you to produce your documentation in different formats, including HTML, LaTeX and ePub. You can also use one of the multiple extensions developed by the community to extend its functionality.
|
||||
|
||||
### Setting up the project
|
||||
|
||||
To begin setting up your project, you will first need an account on Codeberg. If you do not already have one, follow the instructions provided under [Your First Steps on Codeberg](https://docs.codeberg.org/getting-started/first-steps/).
|
||||
|
||||
This guide assumes that you already have Git installed on your machine. If this is not the case, please proceed as described in the article [Install Git](https://docs.codeberg.org/getting-started/install-git/).
|
||||
|
||||
For the purpose of this guide, we will start a documentation project from scratch using an empty repository. To create a new, empty repository and clone it to your local workspace, follow the steps described in the article [Your First Repository](https://docs.codeberg.org/getting-started/first-repository/) as well as the instructions provided under ”Option A: Clone the newly created, empty repository“ within the same article.
|
||||
|
||||
### Creating a Python virtual environment
|
||||
|
||||
A ”virtual“ isolated environment comes in very handy to eliminate the risk of any broken dependencies while working on your projects. Put in other words, setting up a virual environment for your project allows you to run an instance of the Python interpreter with a particular package set and a specific configuration while ensuring compatibility between all these components inside that environment.
|
||||
|
||||
Before proceeding with this task, you should make sure that you have ”pip“ and ”python“ installed on your machine. To perform a preliminary check, type the following commands in your terminal:
|
||||
|
||||
```bash
|
||||
$ pip --version
|
||||
$ python --version
|
||||
```
|
||||
|
||||
If pip and Python are not already installed on your Linux machine, please follow the steps described in the articles [pip Installation](https://pip.pypa.io/en/latest/installation/) and [Installing Python 3 on Linux](https://docs.python-guide.org/starting/install3/linux/) respectively.
|
||||
|
||||
Depending on your Python version, you will need to install a compatible virtual environment manager, i.e. either ”venv“ for Python >= 3.3 , or ”virtualenv“ for older Python versions.
|
||||
|
||||
> **Note**<br />Please note that Python2 has reached its EOL (End of Life) on January 1st 2020, which means that it is no longer receiving any security updates. If you are using Python 3.3 or higher, you do not need to install the ”venv“ module, since it is already available in your Python standard library.
|
||||
|
||||
The next step consists in creating a virtual environment. To do so, navigate to the folder where you have cloned the repository described under the section [Setting up the project](#setting-up-the-project):
|
||||
|
||||
```bash
|
||||
$ cd ~/repositories/foobar
|
||||
$ python3 -m venv env
|
||||
```
|
||||
|
||||
You can replace the second argument ”env“ with any other name your like. This will be the folder hosting your virtual environment.
|
||||
|
||||
> **Important**<br />
|
||||
Use a **``.gitignore``** file to exclude your virtual environment directory from your version control system. To ignore the entire ”env“ folder, you just have to include the corresponding path and append a **``/``** at its end, e.g. **``env/``**.
|
||||
|
||||
### Activating the virtual environment
|
||||
|
||||
Before you begin performing any tasks on your project, you must activate your virtual environment by running the following command:
|
||||
|
||||
```bash
|
||||
$ source env/bin/activate
|
||||
```
|
||||
To make sure that you are working inside your virtual environment, run the command:
|
||||
|
||||
```bash
|
||||
$ which python
|
||||
```
|
||||
|
||||
The output of the command above should be the **`env`** folder, e.g.:
|
||||
|
||||
```bash
|
||||
$ ./env/bin/python
|
||||
```
|
||||
|
||||
Whenever you are done working on your project, run the following command to leave the virtual environment:
|
||||
|
||||
```bash
|
||||
$ deactivate
|
||||
```
|
||||
|
||||
### Installing Sphinx in your virtual environment
|
||||
|
||||
If you have followed the steps described up to this point, your local repository should now contain your virtual environment's folder **`env`** in addition to the hidden **`.git`** directory and the **`.gitignore`** file that we have already described at the end of the section [Creating a Python virtual environment](#creating-a-python-virtual-environment), e.g.:
|
||||
|
||||
```bash
|
||||
├── myproject
|
||||
│ ├── env
|
||||
│ ├── .git
|
||||
│ └── .gitignore
|
||||
```
|
||||
|
||||
<a name="mydocs"></a>
|
||||
You will now create an empty directory then navigate to it. For the purpose of this guide, we will call our directory `mydocs`. Note that you can choose any other name you like:
|
||||
|
||||
```bash
|
||||
$ mkdir mydocs
|
||||
$ cd mydocs
|
||||
```
|
||||
|
||||
Running the command `tree -a` should now give you the following output:
|
||||
|
||||
```bash
|
||||
.
|
||||
├── mydocs
|
||||
├── env
|
||||
├── .git
|
||||
└── .gitignore
|
||||
```
|
||||
|
||||
With your virtual environment activated as shown above, it is now time to install Sphinx with the `pip` tool. To do so, run the command:
|
||||
|
||||
```bash
|
||||
(.venv) $ pip install -U sphinx
|
||||
```
|
||||
|
||||
> **Note**<br /> If you want to find out what the different arguments of **`pip install`** do, type the command **`pip install -h`** in your terminal.
|
||||
|
||||
Once Sphinx is installed on your virtual environment, type the following command in your terminal:
|
||||
|
||||
```bash
|
||||
(.venv) $ pip sphinx-quickstart
|
||||
```
|
||||
|
||||
You will then be asked to answer a series of questions regarding the configuration of your project.<br />
|
||||
Confirm that you want to **`Separate source and build directories`**. For the rest of the questions, keep pressing **Enter** to accept the default values and fill out the requested fields until you reach the question **`autodoc: automatically insert docstrings from modules`**, then choose **”y“ (yes)**. Keep pressing **Enter** again until you reach the question **`Create Makefile?`** and select **”y“ (yes)**.
|
||||
|
||||
If you now run the `tree` command from your `mydocs` folder, you should get the following output:
|
||||
|
||||
```bash
|
||||
.
|
||||
├── build
|
||||
├── make.bat
|
||||
├── Makefile
|
||||
└── source
|
||||
├── conf.py
|
||||
├── index.rst
|
||||
├── _static
|
||||
└── _templates
|
||||
```
|
||||
|
||||
Congratulations! 🎉 You have just finished installing Sphinx on your Linux machine.
|
||||
|
||||
### Running a local HTTP server using Python
|
||||
|
||||
To set up a local testing server for your documentation project, you can use the Python module **`http.server`**. To do so, you will first have to build the html resources for the initial test by running the command:
|
||||
|
||||
<a name="build"></a>
|
||||
|
||||
```bash
|
||||
(.venv) $ sphinx-build -b html docs/source/ docs/build/html
|
||||
```
|
||||
|
||||
Then navigate to the directory hosting the html resources:
|
||||
|
||||
```bash
|
||||
(.venv) $ cd docs/build/html
|
||||
```
|
||||
|
||||
Once there, run the local python server with the command:
|
||||
|
||||
```bash
|
||||
(.venv) $ python3 -m http.server 8080
|
||||
```
|
||||
|
||||
> **Note:**<br />“8080” is the TCP port on which the host server is listening for requests.
|
||||
|
||||
To access the default **`index.html`** file, type **`http://localhost:8080`** in your favorite browser. You should then see the default welcome page.
|
||||
|
||||
### Creating files with reStructuredText and checking the output
|
||||
|
||||
You can start authoring your own content by creating a new reStructuredText file (.rst) in the source directory:
|
||||
|
||||
```bash
|
||||
(.venv) $ cd mydocs/source
|
||||
(.venv) $ touch mynewfile.rst
|
||||
```
|
||||
|
||||
You have just created an empty “.rst” file with the **`touch`** command. An “.rst” file is simply a plain text file that is written with reStructuredText as a markup language. To learn about how to use reStructuredText, follow the instructions provided in the article [reStructuredText Primer](https://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html).
|
||||
|
||||
You will be more productive in your writing if you use a text editor that supports syntax highlighting such as [Emacs](https://www.gnu.org/software/emacs/download.html) or [Atom](https://atom.io/). Linux offers plenty of powerful text editors that support syntax highlighting and other advanced features for coding and authoring tasks.
|
||||
|
||||
> **Note:**<br />Whenever you create a new .rst file, you must add it manually to the `toctree` of your root document, i.e. “index.rst”.
|
||||
|
||||
The toctree directive (toc stands for Table of Contents) inserts a tree that connects the different “.rst” files located in your source directory with each other. Read the article [Directives](https://www.sphinx-doc.org/en/master/usage/restructuredtext/directives.html#toctree-directive) to learn more about the toctree directive.
|
||||
|
||||
Once you have added an .rst file to the `toctree`, you can check the output at any time by running the [sphinx-build](#running-a-local-http-server-using-python) command illustrated above, then refreshing your local testing server.
|
||||
|
||||
If you are satisfied with the result on your local development environment, you can publish the content on Codeberg Pages. To find out how to achieve this, read the article [Pushing output from SSGs into Codeberg Pages](https://docs.codeberg.org/codeberg-pages/pushing-output/).
|
||||
|
|
@ -52,4 +52,4 @@ We really appreciate your contribution.
|
|||
## Installing Pages for your own Gitea
|
||||
|
||||
Codeberg Pages works with any Gitea host out there. So if you are running your own Gitea, you can absolutely run it yourself and help with the development.
|
||||
Check out the [Pages Server repository](https://codeberg.org/Codeberg/pages-server) for more.
|
||||
Check out the [Pages Server repository](https://codeberg.org/Codeberg/pages-server) for more.
|
||||
73
content/codeberg-pages/pushing-output.md
Normal file
73
content/codeberg-pages/pushing-output.md
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
eleventyNavigation:
|
||||
key: PushingOutput
|
||||
title: Pushing output from SSGs into Codeberg Pages
|
||||
parent: CodebergPages
|
||||
author: Fayçal Alami Hassani - https://codeberg.org/ka2in
|
||||
date: January 2022
|
||||
order: 100
|
||||
---
|
||||
|
||||
In case you are using a static site generator (SSG) and that you are satisfied with the result of your project on the local development environment, you can push the files to your Codeberg repository.
|
||||
|
||||
To begin with, we will make sure to have two separate repositories, both locally and on Codeberg:
|
||||
|
||||
- A main repository for the source files, i.e. where the source files related to your main project will be located. We will refer to this repository as the `source` repository. This repository is the one associated with your [mydocs](#mydocs) folder.
|
||||
|
||||
- A second repository for Codeberg pages, that we will call the `deployment` repository. This repository will only contain the files available in the `html` folder located under:
|
||||
|
||||
```bash
|
||||
(.venv) $ cd docs/build/html
|
||||
```
|
||||
|
||||
> **Note:**<br />For the purpose of this guide, we have chosen to use two separate folders/repositories. However, you may want to have a different setup that involves creating a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) instead of having folders and repositories on separate locations. With a submodule, you configuration should look as follows:
|
||||
|
||||
```bash
|
||||
├── sources --> This is a git repo
|
||||
│ ├── build
|
||||
│ │ └── html
|
||||
│ │ └── deployment --> This is a separate git repo
|
||||
│ └── content
|
||||
```
|
||||
|
||||
To copy the content of the `html` folder to your new `deployment` folder, run the command:
|
||||
|
||||
```bash
|
||||
(.venv) $ cp -R docs/build/html/ deployment
|
||||
```
|
||||
|
||||
We will now initialize an empty repository inside the deployment folder. To do so, type the command:
|
||||
|
||||
```bash
|
||||
$ git init
|
||||
```
|
||||
|
||||
To check the status of your project’s files, type the command:
|
||||
|
||||
```bash
|
||||
$ git status
|
||||
```
|
||||
|
||||
To add all the files that are available in your directory to Git, run the command:
|
||||
|
||||
```bash
|
||||
$ git add -A
|
||||
```
|
||||
|
||||
We will then perform a commit with the command:
|
||||
|
||||
```bash
|
||||
$ git commit -m "Example message for your commit"
|
||||
```
|
||||
|
||||
Repeat these steps also in your `source` folder, then push your local commits to the remote repo with the command:
|
||||
|
||||
```bash
|
||||
$ git push origin HEAD:your-remote-branch-name
|
||||
```
|
||||
|
||||
> **Note:**<br />Replace `your-remote-branch-name` by the actual name of your remote branch. It is recommended to intially push your commits to a different branch than the `master` or `main` branch. Once you have made sure everything went smoothly, you can then make a pull request to merge contents. To learn more about “pull requests”, read the article [Pull requests and Git flow](https://docs.codeberg.org/collaborating/pull-requests-and-git-flow/).
|
||||
|
||||
To publish the web content of your `deployment` folder on Codeberg, follow the procedure described under the section [Codeberg Pages](https://docs.codeberg.org/codeberg-pages/).
|
||||
|
||||
You should now be able to visit your content under the following link: `https://{user-name}.codeberg.page`.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
eleventyNavigation:
|
||||
key: CodebergPagesTroubleshooting
|
||||
key: Troubleshooting
|
||||
title: Troubleshooting
|
||||
parent: CodebergPages
|
||||
order: 99
|
||||
|
|
|
|||
Loading…
Reference in a new issue