> [!important]+ 07/2025: IN DEVELOPMENT > Please note that I'm actively building this site. I have launched it while in development so that folks who have my CV can learn about me and see examples of selected work. # 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 writing app along with Obsidian Publisher rather than continuing with my previous practice of using SquareSpace. In making this move there was a bit of learning to do. For one it is just an new experience. But two, there was a bit of additional preparation work I needed to learn with the backend. As I undertook this project, I spent about a day reading through Obsidian documentation, searching for other Obsidian driven websites, and viewing what relevant videos I could find on YouTube as questions arose in my mind. One thing became clear… **few people have documented just how they set-up their Obsidian websites**. To that end, I've documented my journey so that you may be able to have a jump start if you want to try the same thing. # A guide to getting started The following are stages that I went through when developing this website. I've written it as through I'm talking to you. By no means would I say "follow me". Just take it as a way to *get started*. ## Conceptualization Keep it simple. I originally had the idea to build this site at the start of 2025. But I needed sometime to figure out what I *really wanted to do with this website*. I started by jotting down a few purpose ideas on paper. This helped me to recognize that my goals from previous website iterations had changed and that in fact, I needed something that would allow me to focus on the content. Once I had my purpose(s) in mind and thought more about how I hoped this website could help me make the next step in my career, as well as what I was comfortable putting online. From this point, I wrote an outline in Apple Notes. Over a few weeks, I iterated at different times in the day as ideas came and went. My thoughts were simply to take some time, pull together items/examples on my desktop, and decide what I wanted to show. (This is never truly feels complete.) ## Pre-development With an outline completed it was time to create a new vault in Obsidian and start structuring from my outline and writing content. In this process however, I began to learn about the role of CSS files in Obsidian Publish. The following are steps you may follow. ### Creating a vault and community resources Setting up your environment is the most basic thing. There are multiple community plugins that you could install, so explore what others recommend too. I install community plugins that I'm familiar with and know can be useful for my needs. Those I say are "not necessary" I installed because I can see down the road how they will be useful for me. 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. Admonition 2. Advanced Tables 3. Calendar 4. Editing Toolbar 5. File Tree Alternative – not necessary, but I like the option 6. Homepage – not necessary, but I like the option 7. Iconize – not necessary, but I like the option 8. Slash Commander 9. 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 styling your want to 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 in the following ways: 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 you want to apply to your website. For example, the page background color, the header colors, colors for light and dark themes, font styling, 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. Install a proper text editor such as Adobe Dreamweaver. (Honestly, any editor will do that colorizes HTML and CSS text.) Open this and create 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 used to render your website on the web. You can create another CSS file and name it your vault. This one will only be used locally and will in fact be your own custom theme. 2. Open settings in Obsidian (command+,) 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. This will expand over time for you. I like to edit this file and customize 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 are for how the site is handled on different 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 on [customizing 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 over the years. Knowing that I'll make this my site logo, I also wanted this to be 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, I stored this in my image attachments folder in my vault. I've read elsewhere that once I publish this file, the backend will take care of applying this in browser tabs and address bars. ### Begin to write pages With the above backend done, it's enough for me 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 begin to 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 for callout boxes, you just need to use the standard text. ``` > [!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 would strongly suggest 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, you then 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 2023, 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" (command+,) 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'll 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 with and first purchased my domain through Squarespace. This was a mistake for 2 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). It is not written for the layperson, so it may appear a little daunting. 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 do it. Applying permalinks will just make your webpage links clean and sharable. Review [Obsidian's guidance on permalinks](https://help.obsidian.md/publish/permalinks). All that you need to do is create a new [property](https://help.obsidian.md/properties) and name it "permalink". The result will be something like the following. BEFORE a permalink: `https://jasontorresedd.com/1--+site--+development` AFTER a permalink: `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 — *welcome* and *this site* — 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(s), 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 section 5, I have images, graphics, documents, and videos 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. So for some documents and videos this would not work. What I decided to do was to store and manage all of my assets in [Microsoft OneDrive](https://www.microsoft.com/en-us/microsoft-365/onedrive/online-cloud-storage). For one, the storage is great and reliable, but two, you can use `iframe` to embed assets in webpages. For most documents and videos, you will see these as embeds from OneDrive. ### 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 the file size. I have used this app for many years and I keep the quality settings as: JPEG 60%, PNG 80%, and GIF 80%. By default too, I prefer to export images I work with as PNG files. #### PDF files For all PDF files I use [PDF Expert](https://pdfexpert.com). Within this app you can reduce the file size and selections are lossless, high, medium, and low. For my website purposes, I tend to 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 from professional experiences, 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 double the playback speed**. To accomplish this, I first used an amazing open source tool called [HandBrake](https://handbrake.fr) to re-encode the videos. Doing this, I removed the audio and I reduced the file size. Next to speed up the videos, I used Terminal and my copy of [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` While with HandBrake I can setup a queue and automate the workflow, with FFmpeg I had to do each video one-by-one. It was tedious, but it worked as I wanted. > [!note] Video encoding > For both of these described video encoding workflows I highly recommend using a 'good' processor. For instance, if you are using a Mac, then either a PRO or MAX M-series chip. I used a MAX chip and my intial batch of 17 videos took 1-2 hours. ### 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 for the following: **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 did not size correctly on mobile device browsers because the dimensions were absolutely defined. The better way to adjust for this is with CSS. But 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 While not a complete list, 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)