Edit Your Site 🚧
So you have a Github account, a repo, which you published on Github Pages. You also learnt how to launch Codespaces, install fastn on it, and run your site there.
Edit Your Site
The index.ftd file is open in the left editor pane, and the preview of your site is open in the “Simple Browser” on the right. The most important thing to note is that the index.ftd file is the source code of what you see on the right, in the preview browser, which is your website. If you want to modify your website, you have to modify index.ftd (and possibly other files).
index.ftd, but do give it a read, and try to find correspondence between what you see in index.ftd file and what you see in the preview. For example in the line number 5 we have:index.ftd
-- ds.page: Welcome to your [FASTN site](https://fastn.com/)
Which is the big text in the preview.
Let’s edit that line and make it read:index.ftd-- ds.page: Yo, hello there!
All That For A Line Of Change?
Before we proceed let’s take a pause and review. A lot of people ask why is all this necessary? All we did was change the text of the heading. Could we not have changed the heading by clicking on it? If you use Google Docs, Notion, Word, Figma, Wix etc you must be used to just clicking on what you want to edit and editing it.
While that can be done, ask yourself some questions, like should it be a single click or a double click? While you are editing the title can you also change the color? Do you get color picker? While you are editing, do you press Enter to accept the change or Escape key? Who decides all these? What if you do not like the decisions done by that team?
Programming let’s us build the user interfaces where people can click and edit. If we do not learn programming we would be consumers of others who know programming. We will have to pay the price they ask.
Programming itself can be made easier, and at the most fundamental this is what ftd and fastn are about, making programming easy for everyone. But programming is unavoidable. The more our lives become digital, the more software we need.
Let’s Review Our Changes
So you have edited the line number 5 of the file index.ftd. Or maybe you went on your own and made more changes in index.ftd. Or maybe you edited other files as well. Your repository is small, it is just starting, but it will become bigger with time. So how do we see the changes?
Also the changes you have done are so far only in your codespace. If you go look at your repository, eg github.com/<username>/<repo-name>, you will see that there are still only two commits, and index.ftd is still showing the old message.
So you have made changes in a copy of your original repository content. How to send these changes back to the repository?
The first question is what have you modified? You can rely on your memory, “oh I just modified 1 line in index.ftd”, but memory is sometimes unreliable. Also you may have done some accidental changes without realising. We have a better way.
+ button in the terminal and run git status to see the status of our project as per git.
git status in a new terminalindex.ftd. If you had accidentally modified other files it would have shown them.
git status and git diffAs you see, git is pretty good at keeping track of changes. git status tells you about the files that have been edited, added, deleted etc, and git diff shows the actual change in those files.
The output of git diff tells you which files is edited, shows the “deleted” line in red, and also with a - prefix, so if you see clearly the red line has three -s in the beginning, two of them from our file, and one extra - to indicate that line is gone. It also shows added line in green, and with a + in the beginning, so the green line is +-- ds.page: Yo, hello there.
vscode’s built in version control user interface.
git command on the terminal is more powerful, it let’s you do lot more than the UI like this let’s you do. Also the UI like this may not always be available, maybe you are not using vscode, maybe you are trying to debug things on a server. git will work in a lot more places so it helps to learn it.Committing The Changes
So you have modified one line in one file so far. You have previewed the change in the preview browser and are happy with the output. You have also reviewed the changes using git diff to satisfy yourself that you have not accidentally made some other change, and the change looks good to you.
Your changes are still on your codespace and no one can see those changes yet. If you lose access to the codespace you will lose these changes. To preserve the change we have to do two things, create a commit containing your changes and then push the commit to your repository.
What is a commit? A git repository is built on top of commits. commits is the core concept of git. commits contain changes. A commit can contain information about one or more changes. You have some changes so far, one change to be precise. You can convert this change into a commit using git commit command.
Getting Help
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!Found an issue?
Quick links:
Join us
We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
