Working in Public

Layout

• My base layout was made using Sadness's Layout Builder.
• I basically aggressively stripped out everything until I only had a nice center box for text with background space on each site, because I wanted to actually understand every part of my website.
• Going forwards the plan is to use her building a layout from start to finish guide to add more elements, as needed. Stuff I want to have eventually include:
  • A sidebar
  • More pages for different projects, that can be navigated to via the sidebar.
  • A footer, maybe?

Working With Text

• I started off just writing all my text inside the html page of the page that I'm working on, but I very quickly got annoyed by the amount of HTML tags that I needed to manually type.
• Now I write them in markdown using my note taking app, Obsidian.
• After I'm done I select everything I've written and paste it into https://markdowntohtml.com/.
• Then I paste the Raw HTML back into the HTML file for my neocities page and only do the final touchups there. Much easier!

Updating the Site

I started out typing everything directly into the editor at neocities.org, but this was frustrating and there was some weird bugs where the files won't save properly, or they did save but I wasn't able to see the changes or the changes weren't reflected on the site.

My current solution has a copy of cool-links in a folder in my documents. I can edit that version however I like using a text editor (I use Brackets because of the live preview feature). After I'm satisfied with all my edits, I use Github Desktop to automatically update my site on neocities to reflect the changes I did to the copy of my site in my folder, or to undo some or all of the changes I made if I'm dissatisfied. Github Desktop can do this, even if you clicked "save" in the files you were editing.

Instructions

Setting Up The Repository

Doing the following will allow you to track changes to all your files.

1. Make a free Github account. Using github desktop, log in, and place a new repository anywhere in your documents. Name it something reasonably connected to your neocities, like the name of your website.
2. Go to the folder that was created when you created that new repository, in the file explorer. In it, add a new folder called "website-itself"
3. Download your entire site from your neocities dashboard.
4. Unzip your site and put all the files inside the folder "website-itself".

Connecting that folder to my Neocities

I use a modified version of the deploy to neocities github action to make my neocities reflect what's in my folder after I'm done fiddling around with it.

1. Create a new folder in your repository folder titled named ".github". This folder should be in the same place as your "website-itself" folder. Create another folder inside that one called "workflows", and create a file called "neocities.yml" inside "workflows".
2. Paste the following code into neocities.yml:
   

   name: Deploy to neocities
   
   # only run on changes to master
   on:
     push:
       branches:
         - main
   
   concurrency: # prevent concurrent deploys doing strange things
     group: deploy-to-neocities
     cancel-in-progress: true
   
   jobs:
     deploy:
       runs-on: ubuntu-latest
   
       steps:
       - uses: actions/checkout@v3
       - name: Deploy to neocities
         uses: bcomnes/deploy-to-neocities@v1.1.9
         with:
           api_token: ${{ secrets.NEOCITIES_API_TOKEN }}
           cleanup: false
           dist_dir: ./website-itself
                               

3. Now, head over to https://neocities.org/settings/[YOUR SITENAME]#api_key , replacing [YOUR SITENAME] with the name of your site. Click "generate API key", and copy that string.
4. Head over to your github profile on github.com. Navigate to the repository for your neocities, and then click "settings". On the sidebar, under "Security", click "Secrets", then "Actions". On that page, click "New repository secret". The name of that secret should be NEOCITIES_API_TOKEN , and the secret is the API key you generated in step 3.

Making and Pushing Changes

1. When you want to edit your website, open it up in your text editor of choice. What I generally do is navigate to my "website-itself" folder, right click on any white space, and click "Open as Brackets Project" in the menu that pops up.
2. Do whatever you like with the website files that live inside your documents, and save them - this will not impact the version of your site on neocities. You can preview any changes you make by opening up the HTML files from your folder, and clicking refresh whenever you save new edits to your website files. When you're satisfied, open up github desktop. (This should be the default, but ensure that your "current repository" is the one for your site, and that your "current branch" is "main".) The majority of your screen will be taken up by a comparison of your website files, before and after your edits.
3. If you don't like your changes, right click the bar on the top of the left sidebar that says "1 (or however many) changed file(s)" and click "discard all changes". You can also pick through the changes you want and don't want, but that's a riskier venture!
4. If you like your changes, in the box in the bottom left corner, add a title describing the changes you made and an optional description. Then click the "commit to main" button.
5. This last step will update your neocities: simply click "push origin", which is near the top of the screen. Within a few seconds, your neocities site should be updated to reflect the changes you made to your website files :)

Other Stuff I Use

• multiscreen test
• building a layout from start to finish

Inspo/Guides/Todo

• a microblog in plain html
• another one
• website graphics - lulu in cyberspace
• things i wish i knew as a 15 year old web designer
• a recipe to your own website
• webmastery resources by sadgrl.online
• cool templates
• desc of min/max/clamp in css