You should see the following when viewing the Front Porch Repo:

Click on the "Fork" button. Once done, you should see the following page:

Use the following format for your fork's name:

[github-username].github.io

For me, that was joshwingreene.github.io.

I recommend that you keep the "Copy the main branch only" option checked.

Path A - Set up via GitHub's Codespaces Feature (Recommended for people who are new to GitHub and Technical Concepts)

Path B - Set up yourself (Recommended for Technologists)

After you have created your fork, you should be presented with a page that looks like the following:

Click on the green "Code" button. You should see the following:

Click on the "Create codespace on main" button. This will start up a new codespace for you that's connected to the "main" branch of your front porch. More info about this is in Step A.7.

You should see a page that looks like this:

Important: Whenever you want to edit your front porch in the future, you should click on the "Code" button and click on the codespace that you created. The name of your codespace is in the bottom left-hand corner of your codespace. For example, mine is called "humble space winner."

Front Porch is a fork of Quartz. Quartz relies on existing technologies in order to work. We need to install those technologies in order for everything to work properly.

Enter the following command into your codespace's terminal and execute it:

npm install

Here are two images that show this command in action:

All Rights Reserved.

For reference, you can see how I edited mine.

Location of the Static Folder

• root/quartz/static

Follow the following steps from Quartz to host your front porch on github

1. Head to “Settings” tab of your forked repository on GitHub and in the sidebar, click “Pages”. Under “Source”, select “GitHub Actions”.

Reference: Hosting

• The deploy.yml file was added for you.

Once done, any "commits" that you submit/push to GitHub will cause your changes to me pushed to your hosted front porch.

For reference, your site will be located at the following url:

https://<github-username>.github.io

For example, for me, this is...

https://joshwingreene.github.io (which points to joshwingreene.com)

More info about committing can be found in the next step.

You can view the status of your submissions/pushes by going to the "Actions" tab on your front porch repo on Github.

Here's the url for the Actions tab:

https://github.com/<github-username>/<repo-name>/actions

For example, for me, this is...

https://github.com/joshwingreene/joshwingreene.github.io/actions

In order for people to see the changes that you have made to the "main" branch of your front porch, you will need to "stage" and "commit" those changes.

In the following image, you will see that I made an edit and that there's a (1) on top of one of the tabs on the left-hand side. There's a yellow arrow that points to the (1).

If you want a single command that takes care of both steps for you, you can use the following command from Quartz: npx quartz sync.

If you want to do these steps manually, here are the instructions based on the above example:

1. Click on the tab on the left-hand side that has a (1) on top of it. This tab will open. As you can see below:

2. A "+" icon will show up if you hover over the area between "Changes" and the (1) that is below the green "Commit" button. If you click that "+", it will stage everything that is listed in the Changes area. Once that happens, you can enter a relevant message, click commit, and click sync.

What you will see after the changes are staged:

After a message is entered for the commit:

After "Commit" is clicked (Note - I used a different example, but the process is still the same.):

After "Sync Changes" is clicked:

Scroll down until you see it

Prerequisites

"Quartz requires at least Node v18.14 and npm v9.3.1 to function correctly. Ensure you have this installed on your machine before continuing"

git clone https://github.com/[github-username]/[github-username].github.io.git

ex. https://github.com/joshwingreene/joshwingreene.github.io.git

In order to see a preview of your front porch, you need to use the following command:

npx quartz build --serve

All Rights Reserved.

Location of the Static Folder

• root/quartz/static

1. Head to “Settings” tab of your forked repository on GitHub and in the sidebar, click “Pages”. Under “Source”, select “GitHub Actions”.

2. Commit these changes by doing npx quartz sync. This should deploy your site to .github.io/.

Reference: Hosting

• The deploy.yml file was added for you.

Follow the steps that Quartz provides:

Custom Domains

Authoring Content

Front Porch supports all of the frontmatter fields that Quartz uses.

For example, 'last-modified' field should be added to notes/essays that have been modified. Additionally, the 'date' field specifies the date that a note/essay was initially published.

Here are the frontmatter fields that are unique to Front Porch: