Creating and Maintaining This Site

  2024/03/07

Posted Tag: #Linux
Other Tags: #Windows, #Personal, #All

First of all you know I am going to do this in Arch Linux of course. I may present doing this in Windows at a later date when I conclude how to do it.

Overall you need to install Docker and to do this you can as in sudo pacman -S docker.

I installed my now favorite editor VSCode or rather VSCodium, yay -S vscodium-bin, since it is open source. The supporting files I originally got from developer Andrew Welch in this blog post. How I found it I do not remember but I liked what he was doing because it was very portable. If you for instance needed to setup for another site or have other contributors for a site, it is very easy. Related to all this is his use of Eleventy or 11ty to develop with. Andrew in his blog started by cloning the elventy-base-blog to start a project which it did too until I learned a lot more about all this and didn't need all the features. I was actually building first a brother's site selling his hot sauces, which is very simple with links to EBay. I did it the way he wanted and this site is not much more difficult in scope. A YouTube video or series of them that was very helpful in understanding 11ty was by Jaydan Urwin. Like him I am using Nunjunks for templates. His videos really helped me with 11ty.

The other things I need to make this basically free, other that the domain name annual fee, involve GitLab and Cloudflare. I use GitLab because Microsoft bought GitHub. I use VSCodium due to Microsoft too. The same reason I use Linux now. So no, I do not like Microsoft very much. Where Cloudflare comes in here is they sense a change in my associated GitLab project, they copy my files and run npm on my newly uploaded project. They then post it on their servers using my domain name that is associated. Cloudflare does all this for free. Of course this site and my brother's, are HTML static sites. They are much cheaper than server backed sites to maintain. Well free for now I guess. But neither of these sites are very heavy to operate. I mean I have no back-end server attributes or databases. For comments you have to send me an email to post it. And by the way, I have not worked out how to implement comments yet because I have not received a comment yet. So please do not comment to just force my hand.

One more thing to get your head around is Git. Here are my usual ways to setup a new project with Git. First make a new project with my choice GitLab or GitHub if you want, and it does not need to be public facing. By all means keep it private. Here are the commands for terminal in Linux. Make sure sudo pacman -S git has been used to get you Git to begin with.

Initial setting for the computer used:

git config --global user.email "[email protected]"
git config --global user.name "user"`

Here are my setup steps for say a new project. For each project the first command actually initializes the directory for Git so be in this project directory when you run it. Create a directory for your project and in VSCodium open this folder. At the top menu open a New Terminal and run the below:

git init
git remote add origin [email protected]:username/project.git
git status remote # Just to verify
git status origin # Just to verify

In my case, if I am redoing this for whatever reason, I run this to clone my GitLab project. By the way, doing this will create a directory named your project. Also doing this your GitLab username and password are needed since your GitLab project is private.

git clone https://gitlab.com/username/project.git

Here is how to push to your GitLab project. In VSCodium in Terminal you will be asked for your GitLab username and password. The last of the commit is a description for the change. First here add any new files.

git add *
git commit -a -m "updated 3/4/2024"
git push origin main

One note here is when I started my brother's project with GitLab the origin was master and then later GitLab switched to main. I still have to use master with that project.

In the project directory create the following files. Of course I use the word project where you put your project name in these files.

package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "install": "npm install",
    "build": "npx eleventy",
    "serve": "eleventy --serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
    "@11ty/eleventy-navigation": "^0.3.5"
  }
}

The below I add when I clone my project because it is needed to initialize the project. I remove it from package.json after initializing a project.

"install": "npm install"

Makefile:

TAG?=14-alpine

docker:
	docker build \
		. \
		-t project/node:${TAG} \
		--build-arg TAG=${TAG} \
		--no-cache
npm:
	docker container run \
		--name 11ty \
		--rm \
		-t \
		-p 80:8080 \
		-p 3001:3001 \
		-v "${CURDIR}":/app \
		project/node:${TAG} \
		$(filter-out $@,$(MAKECMDGOALS))
%:
	@:

Dockerfile:

ARG TAG=14-alpine
FROM node:$TAG

WORKDIR /app

CMD ["run build"]

ENTRYPOINT ["npm"]dockerfile

Now in Terminal in VSCodium type the following:

make docker

make npm install

I use Markdown for my post and I paid for a Markdown editor called Typora. It makes writing Markdown a lot easier. I made a Markdown template with my Nunjuke template stuff in it to start this post for instance. So after you get the hang of 11ty and create some HTML type this to serve the site in your browser and when you edit something it will automatically update the browser for you.

make npm run serve

Type this to stop serving the browser.

CNTR C

Use Git to upload to GitLab or GitHub, give Cloudflare a little time to sense the change and your now updated site will be live with your domain name.

I know this is a little involved but once you have it working and, if all you need is a static HTML site, it is really easy. And it is very portable as long as you are using Linux.

I will work out how to do this on Windows eventually. And I should write about how to setup Cloudflare.

Wish to add a comment? Your email address will never be shared with anyone. Please specify a user name for your comment or use anonymous.

Email me a comment to post it.