#website-development # How this site was developed This site was developed using [Apple Notes](https://en.wikipedia.org/wiki/Notes_(Apple)), [Adobe Dreamweaver](https://www.adobe.com/products/dreamweaver.html), and [Obsidian](https://obsidian.md). As discussed in [[and… we're off#how this is built and organized]], I opted to build this website with the [Obsidian](https://obsidian.md) writing app with [Obsidian Publish](https://obsidian.md/publish) instead of continuing with using SquareSpace. Making this move was a new experience and involved some preparation work, including learning about the backend. As I undertook this project, I spent a day reading through Obsidian documentation, searching for other Obsidian website designers, and viewing relevant videos on YouTube. One thing became clear, ***very few people have documented how they set-up their Obsidian websites***. So I have documented my set-up to help you start building an Obsidian website. # A guide to getting started The following are stages that I went through when developing this website. ## Conceptualization It is generally best to **keep it simple**. I originally had the idea to build this site at the start of 2025. But I needed some time to figure out my goals. As I jotted down ideas, I realized that my goals had changed from previous websites. I needed something that would allow me to focus on written content. Once I had my purpose in mind, I thought more about how I hoped this website could help me. I wanted it to communicate my professional background and help me land a new professional role. From there, I wrote an outline and over a few weeks worked with some ideas. I iterated on paper and pulled together digital assets in folders. ## Pre-development With an outline completed and collected assets, I created a new Obsidian vault and started building a structure from my outline. Then I began to write content. As I did this, I studied the details of some websites I liked, and learned about the role of CSS files in Obsidian Publish. ### Creating a vault and community resources Setting up your environment is the most basic thing. There are multiple community plugins that you can install to help. But explore and see what others recommend too. I install community plugins that I'm familiar with and have a clear purpose for. 1. [Create new vault](https://help.obsidian.md/vault) and name it as you plan to name your website. You should create an empty vault. Like other vaults, this will be local. I suggest you create a folder such as **Obsidian-Vaults** on your computer, then store your individual vaults in that folder. 2. **Install [Community Plugins](https://obsidian.md/plugins)**. You can search for those using the provided link, or in the **Community plugins** tab under **Options** in Obsidian settings. I installed the following community plugins to get started: 1. Advanced Tables 2. Calendar 3. Editing Toolbar 4. Slash Commander 5. Templater 3. **Do not install [Community Themes](https://publish.obsidian.md/hub/02+-+Community+Expansions/02.05+All+Community+Expansions/Themes/🗂%EF%B8%8F+Themes)**. I will use themes in my study vault, but for your publish vault, this will interfere with any CSS styling you may do. ### Create a basic page template In my study vault I have a few different new page templates for various needs. For getting started in this website vault, I created a basic page template and defined it as follows: 1. File name: TEMP_Page-title 2. Properties: - title — text - slug — text - created-date — mm/dd/yyyy - updated-date — mm/dd/yyyy - tags - publish — checkbox 3. H1: First page heading 4. 3 dashes for a horizontal rule ### Explore and create a CSS file You need to consider CSS for any custom styling on your website. For example, the page background color, the header colors, colors for light and dark themes, fonts, links, etc. A published site without any custom CSS file will render just fine and appear in the standard Obsidian white, purple, and black. But this step and how you work with it over time will make the website *yours*. 1. Use a proper text editor such as Adobe Dreamweaver. Open this and create a new text file. Save it to your desktop and name it **publish.css**. - This **publish.css** file is what will be uploaded to Obsidian Publish and will be used to render your website styling. You can create another CSS file and name it your vault. This one will only be used locally and will in fact be your local custom theme. 2. Open settings in Obsidian and go to **Appearance**. Scroll down to **CSS snippets**. Click the folder icon and this will open the **snippets** folder in your local/publish vault. Drop your **publish.css** file in here. 3. I like to edit this file and customize it once I have pages up on the web. To get started, I used the following styling: ``` .published-container { --page-width: 800px; --page-side-padding: 48px; --logo-width: ; --logo-height: ; --site-name-color: ; --site-name-color-hover: ; .theme-light { --background-primary: #FFFCF0; --background-secondary: ; --text-normal: ; --text-muted: ; --text-accent: ; --h1-color: #4385BE; --h2-color: #8B7EC8; --h3-color: #3AA99F; --h4-color: #CE5D97; --h5-color: #D0A215; --h6-color: #DA702C; .theme-dark { --background-primary: #110F0F; --background-secondary: ; --text-normal: ; --text-muted: ; --text-accent: ; --h1-color: #4385BE; --h2-color: #8B7EC8; --h3-color: #3AA99F; --h4-color: #CE5D97; --h5-color: #D0A215; --h6-color: #DA702C; @media screen and (min-width: 1000px) { /* ... rules and variables for screens larger than tablet */ } @media screen and (max-width: 1000px) { /* ... rules and variables for tablet devices and smaller */ } @media screen and (max-width: 750px) { /* ... rules and variables for mobile devices and smaller */ } body { } img[alt*="center"] { display: block; margin-left: auto; margin-right: auto; } img[alt*="right"] { float:right; clear:right; margin-left: 1rem; margin-bottom: 2px; margin-top: 2px; } ``` 4. The **publish container** and **themes** are necessary when building a [publish theme](https://docs.obsidian.md/Themes/Obsidian+Publish+themes/Build+a+Publish+theme). The **media screen** rules determine how the site is handled across web-browsers. The **body** is something I will define over time. And the **img** tags are for aligning images to the center and to the right. - Right alignment in the markdown (CSS guided) — `![[image_name | right]]` - Center alignment in the markdown (CSS guided) — `![[image_name | center]]` ### Prepare a favicon You should refer to this Obsidian Help page to [customize your site](https://help.obsidian.md/publish/customize). I have a drawing of myself that a student made of me when I was teaching in China. I love this image and have used it as a logo previously. Knowing that would be my site logo, I also made this my favicon. 1. Create 3 versions of the image with Adobe Photoshop. In my case, I created the following: `favicon-32x32.png`; `favicon-128x128.png`; and `favicon-192x192.png`. 2. Per Obsidian's instructions, store this the image attachments folder in your vault. Once the file is published, Obsidian will resolve the backend and apply this in browser tabs and address bars. ### Begin to write pages With the above backend done, it's enough to begin to write. As I previously mentioned, I prefer to do styling once I have some content on the web. So for me, I build sections and write pages. When writing you should note however that [Admonitions](https://github.com/javalent/admonitions) <u>will work</u> in your vault, but <u>will not publish correctly</u> on the web. At first I thought this was a CSS error. It is in fact just a lack of function with the plug-in. So use **callout boxes** that are built-in. For example: ``` > [!NOTE] Callout example > Standard text content. ``` ## Getting on the web I wanted to get up an running on the web quickly. I first purchased Obsidian Publish, moved some content up, edited it, and then purchased a domain. Setting up the domain was the part where I caused myself a headache by not reading ahead. Read ahead on setting up [Custom Domains](https://help.obsidian.md/publish/domains)! ### Setting-up Obsidian Publish Doing this was very easy. Just create an account with your name, an email address, and password. Once you've created this, I recommend that you **first complete 2-factor authentication (2FA)**. At the time I created my 2FA, the best option was to use an authentication app such as [Microsoft Authenticator](https://www.microsoft.com/en-us/security/mobile-authenticator-app). With your account set up, go to the "Publish" tab in the left navigation and click the "Buy Publish" button. You do not need to also purchase "Sync". Just follow the steps and decide between monthly or yearly billing. In June 2025, yearly billing comes out to $8 USD per month. Also, if you have a nonprofit or edu email address, you can apply for a 40% discount. Instructions for that are under the "Billing" tab. Once you've purchased your license, go into the vault that you want to publish and enable publishing. To do this, go to "Settings" then select "Core plugins" under the "Options" section. Scroll down and toggle on "Publish". Once you do this a paper plane icon will appear on the left-side ribbon of your Obsidian UI. Click on this and then you will be prompted to set your **site ID**. Type that in, click "Create", and then it will be `publish.obsidian.md/yoursite`. Until you setup a custom domain, this will be the path to your website. Once this is set up you should click on the gear wheel on the top-left of the publish window. Be sure to immediately set the 1) site name, 2) homepage file, and you 3) logo. For the logo, this should be a PNG file, stored in your vault, and published. This image is what appears on the top-left of your site page(s). And when you click on it, it will go to your homepage. Finally, I set my site options to the following: - Reading experience: - Show hover preview — disabled - Hide page title — disabled - Readable line length — enabled - Strict line breaks — disabled - Stake pages — disabled - Components: - Show navigation — enabled - Customize navigation — hid attachment, image, and template folders; arranged so that 'about' section files/pages appeared at the top of each section - Show search bar — enabled - Show graph view — disabled - Show table of contents — disabled - Show backlinks — enabled Finally, be sure to follow these [simple instructions from Obsidian](https://help.obsidian.md/publish/setup) to set up your published vault. ### Purchasing a domain and getting it functional This is where I first messed up and wasted a few hours. Read [Obsidian's guidance on custom domains](https://help.obsidian.md/publish/domains) first! ==You must use [CloudFlare](https://www.cloudflare.com) to setup your domain.== I initially did what was comfortable and purchased my domain through SquareSpace. This was a mistake for two reasons: 1) it won't work with Obsidian Publish, and 2) it's more expensive. Fortunately, SquareSpace gives a 5-day window to delete domains and get a refund. Go to CloudFlare and search for the domain you want to buy. Once you have found it, go through the purchase process and create your account. It's very easy. When this is done, first go to your profile by clicking on the person icon at the top-right and select "Authentication". Here you should setup your 2FA. Now you must follow the instructions on Obsidian's page on [custom domains](https://help.obsidian.md/publish/domains). Beware that it is not written for the layperson. Just keep these things in mind: - DNS settings can be found on the left-navigation. - You will need to set DNS for both `yoursite.com` and `www.yoursite.com` - Follow the instructions to first setup `yoursite.com` and note that CloudFlare by default enables **proxy status** and sets **SSL/TLS** to "Full" mode. - Once `yoursite.com` is setup, create a "Page Rule" for `www.yoursite.com`. Then go back to DNS settings and do the same instructions for `www.yoursite.com`. - **Only AFTER this is done** should you go to Obsidian publish settings. Go to "Custom domain" and type in `yoursite.com`. Do not use the WWW. Save these settings. - Give it about 5 minutes and you'll be all set. ### Permalinks This is not required, but you should add these to the properties of your pages. Applying permalinks will just make your webpage links clean and sharable. Review [Obsidian's guidance on permalinks](https://help.obsidian.md/publish/permalinks). To create a permalink, create a new [property](https://help.obsidian.md/properties) and name it "permalink". The result will be something like the following. BEFORE: `https://jasontorresedd.com/1--+site--+development` AFTER: `https://jasontorresedd.com/site-development` ## On-going development As with anything, you learn the fundamentals, do some practice, and then learn a lot more once you start working and putting it together. After creating the first 2 sections, I began to prepare to build the other sections. The first step as always is to plan. I wrote my outline, created my to-do list, and then began to go through folders and files to gather all of the assets I would use to explain each section and page. ### Page asset storage and management For many of my pages, particularly in my professional section, I have a collection of media to show. The first step was to gather all of these materials, but I had to decide where to put them. Your Obsidian vault can be as big as you want. But Obsidian Publish will only allow you to consume 4GB of online storage. To solve this problem, I decided to store and manage all of my assets in [Microsoft OneDrive](https://www.microsoft.com/en-us/microsoft-365/onedrive/online-cloud-storage). The storage is great and reliable and you can use `iframe` to embed assets in webpages. ### Asset size reduction For reasons of limited storage capacity with Obsidian Publish and concerns for remote load times with embedded assets from OneDrive, I needed to optimize all assets. #### Graphics and images For all graphics and images within my Obsidian vault or stored in OneDrive, I used [ImageOptim](https://imageoptim.com/mac) to reduce file sizes. I keep the quality settings as: JPEG 60%, PNG 80%, and GIF 80%. By default too, I prefer to export images as PNG files. #### PDF files For all PDF files I use [PDF Expert](https://pdfexpert.com)to reduce the file size. Selections are lossless, high, medium, and low. For my purposes, I set this to at the medium setting. But I always review the images in the exported PDF for degradation. If that occurs, then I will re-export at the high setting. #### Video files For videos I share, I **am showing them for storytelling purposes only**. **I am not showing them to provide the purpose of their creation.** Additionally, I am concerned about ownership and copyright. For these reasons, **I reworked videos to be shown without audio and at 2x playback speed**. To accomplish this, I first used [HandBrake](https://handbrake.fr) to re-encode the videos. Using this I removed the audio and reduced the file size. To speed up the videos I used Terminal and [FFmpeg](https://trac.ffmpeg.org/wiki/How%20to%20speed%20up%20/%20slow%20down%20a%20video) thanks to [Homebrew](https://brew.sh). Within FFmpeg I used the [**setpts filter**](https://ffmpeg.org/ffmpeg-filters.html#setpts_002c-asetpts) and started with this command: `ffmpeg -i input.mkv -filter:v "setpts=0.5*PTS" output.mkv` While this worked, I wanted the video to go faster. I reduced the speed by a quarter increment and used this command: `ffmpeg -i input.mkv -filter:v "setpts=0.25*PTS" output.mkv` With HandBrake I can setup a queue and automate the workflow. But with FFmpeg I had to do each video one-by-one. It was tedious, but it worked as I wanted. > [!note] Video encoding on MacOS > For both of these described video encoding workflows I highly recommend using a Mac with either a PRO or MAX M-series chip. I used a MAX chip and my initial batch of 17 videos. That took 1–2 hours to complete. ### Asset embedding and presentation As mentioned, by using OneDrive you can use `iframe` to embed remote assets and present them. For example with the [[2021-2022, Starting Adobe Series]] page I wanted to embed a single PDF document and on the [[2023-2024, Plan a digital project]] I wanted to embed a single PDF presentation. By default the embed code is too small. So I edited the width and height as follows: **PDF document** `<iframe src="url" width="700" height="800" frameborder="0" scrolling="no"></iframe>` **PDF presentation** `<iframe src="url" width="700" height="400" frameborder="0" scrolling="no"></iframe>` #### Shortcut asset embedding and presentation The initial approach I used to embed documents and presentations works on desktop browsers, but does not size correctly on mobile device browsers because the dimensions were absolutely defined. The better way to adjust for this is with CSS. As a shortcut, I opted to control for this in the short-term by defining width as 100% and height with a defined unit. You will notice the inclusion of a `class` in the shortcut HTML for CSS control. **PDF document (portrait) — shortcut** `<div class="container"><iframe class="responsive-iframe-pdf-port" src="url" width="100%" height="550" frameborder="0" scrolling="no"></iframe></div>` **PDF document (landscape) — shortcut** `<div class="container"><iframe class="responsive-iframe-pdf-land" src="url" width="100%" height="450" frameborder="0" scrolling="no"></iframe></div>` **PDF presentation — shortcut** `<div class="container"><iframe class="responsive-iframe-sd" src="url" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>` **Full HD video — shortcut** `<div class="container"><iframe class="responsive-iframe-vid" src="url" width="100%" height="540" frameborder="0" scrolling="no" allowfullscreen></iframe></div>` --- ## Resources referenced The following are websites I used and referenced along the journey of building this website. - [Obsidian Help – Introduction to Obsidian Publish](https://help.obsidian.md/publish) - [Obsidian Help – Customize your site](https://help.obsidian.md/publish/customize) - [Obsidian Docs – Build a Publish theme](https://docs.obsidian.md/Themes/Obsidian+Publish+themes/Build+a+Publish+theme) - [Obsidian Docs — CSS variables](https://docs.obsidian.md/Reference/CSS+variables/CSS+variables) - [Obsidian Docs – Publish](https://docs.obsidian.md/Reference/CSS+variables/Publish/Publish) - [Steph Ango, Projects](https://stephango.com/flexoki) - [Nicole van der Hoeven, Fork My Brain](https://notes.nicolevanderhoeven.com/Obsidian+Publish)