class: left, middle # **Leveraging your R skills to get your science out there <br/> (even if you do not know that much R)** <br/> ## Create your own website with R! <br/><br/> ### **Luna L. Sanchez Reyes** ### University of California, Merced <br/><br/> Enviro-lunch Seminar April 23, 2020 · Merced, California Find the code for these slides [<span><i class="fab fa-github faa-passing animated "></i></span> here](https://github.com/lunasare/slides/blob/master/leveraging-r-2020-04-20.Rmd). --- class: split-20 bg-blue .row[.content.vmiddle[ # <i class="fab fa-r-project"></i> is a widespread tool for doing research ]] .row[.content.center.font2[ <br/>   · Widely used for statistical analyses in .indigo[biology, math, psychology, education, ...]   · Also other analyses, like .purple[phylogenetics, ecological interactions, machine learning]   · Has great tools for .amber[figure and graph generation] ]] --- class: split-20 bg-teal .row[.content.vmiddle[ # <i class="fab fa-r-project"></i> is ***also*** a tool for making your academic life easier ... ]] .row.split-two[ .row.split-two[ .column[.content.font_medium.right[ · Generating reports of great quality · Writing papers · Collaboration · Reproducibility and open Science ]] .column[.content[ <img src="https://github.com/annakrystalli/talks/raw/master/assets/science-cat.jpg" width="300px"> ]] ] .row[.content.vmiddle[ ## not by itself, but when it is paired with a .amber[markup language] 🚀 Markup languages are used to generate ***human-readable***, plain-text document that use tags to define elements and give format to documents. ]] ] --- class: split-20 .row[.content.vmiddle[ #   Markup languages: some examples ]] .row.split-two[ .row.split-two[ .column.split-40.bg-gray[ .column[.content.center.vmiddle[ ## html ]] .column[.content.center.nopadding.vmiddle[ <img src="https://www.w3.org/Style/Examples/011/snapshot11.png" width="300px"> ]] ] .column.split-60.bg-black.white[ .column[.content.center.nopadding.vmiddle[ <img src="https://upload.wikimedia.org/wikipedia/en/e/ee/RecipeBook_XML_Example.png" width="300px"> ]] .column[.content.center.vmiddle[ ## xml ]] ] ] .row.split-two[ .column.split-40.bg-black.white[ .column[.content.center.vmiddle[ ## markdown ]] .column[.content.center.nopadding.vmiddle[ <img src="https://i2.wp.com/en.blog.files.wordpress.com/2013/11/markdown-in-text-editor.png" width="300px"> ]] ] .column.split-60.bg-gray[ .column[.content.center.nopadding.vmiddle[ <img src="https://i0.wp.com/texblog.org/Wordpress/wp-content/uploads/2011/06/latex-example1.png?resize=571%2C351" width="300px"> ]] .column[.content.center.vmiddle[ ## latex ]] ] ] ] --- class: split-20 .row[.content.vmiddle[ #   Markup languages: some examples ]] .row.split-two[ .row.split-two[ .column.split-40.bg-gray[ .column[.content.center.vmiddle[ ## html ]] .column[.content.center.nopadding.vmiddle[ <img src="https://www.w3.org/Style/Examples/011/snapshot11.png" width="300px"> ]] ] .column.split-60.bg-black.white[ .column[.content.center.nopadding.vmiddle[ <img src="https://upload.wikimedia.org/wikipedia/en/e/ee/RecipeBook_XML_Example.png" width="300px"> ]] .column[.content.center.vmiddle[ ## xml ]] ] ] .row.split-two[ .column.split-40.bg-amber[ .column[.content.center.vmiddle[ ## markdown ]] .column[.content.center.nopadding.vmiddle[ <img src="https://i2.wp.com/en.blog.files.wordpress.com/2013/11/markdown-in-text-editor.png" width="300px"> ]] ] .column.split-60.bg-gray[ .column[.content.center.nopadding.vmiddle[ <img src="https://i0.wp.com/texblog.org/Wordpress/wp-content/uploads/2011/06/latex-example1.png?resize=571%2C351" width="300px"> ]] .column[.content.center.vmiddle[ ## latex ]] ] ] ] --- class: split-20 bg-amber .row[.content.vmiddle[ # <i class="fab fa-r-project"></i> + easy markup language = <i class="fab fa-r-project"></i> markdown! ]] .row[.content[ ## .indigo[Why create yet another markup language?] <br/> .center.font_medium[ Effectively *understands* other markup languages, i.e., you can add html, css, latex, ...   Not only ***include*** code, but ***run*** the code Change formatting for any journal in seconds   Include citations and format them Automatically include a reference list in any format you need   Render to different file formats, including word 😜 And last but most importantly, easily add emojis and icons ] ]] --- class: split-20 .row[.content.vmiddle[ # The potential of R markdown 🙌 ]] .row.split-four.white.font_medium[ .row.split-two.slide-in-left[ .column.bg-gray[.content.center[ Insert citations in any format <br/> with .deep-orange.font-mono[citr] ]] .column.bg-black[.content.center[ Use paper templates for popular journals <br/> with .green.font-mono[rticles] ]] ] .row.split-two.slide-in-right[ .column.bg-black[.content.center[ Generate word docs and de-render them back to R markdown with edits and tracked changes <br/> with .blue.font-mono[redoc] ]] .column.bg-gray[.content.center[ Create and maintain online books <br/> with .lime.font-mono[bookdown] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/bookdown.png" width="50px"> ]] ] .row.split-two.slide-in-left[ .column.bg-gray[.content.center[ Build and maintain package and usage documentation with .pink.font-mono[pkgdown] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/pkgdown.png" width="50px"> ]] .column.bg-black[.content.center[ Organise an analysis project and construct a website for it with .purple.font-mono[workflowr] [<img src="https://raw.githubusercontent.com/workflowr/workflowr-assets/master/img/hex-workflowr.png" width="50px">](https://github.com/jdblischak/workflowr) ]] ] .row.split-two.slide-in-right[ .column.bg-black[.content.center[ Create and maintain blogs and academic websites <br/> with .amber.font-mono[blogdown] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/blogdown.png" width="50px"> ]] .column.bg-gray[.content.center[ Create slide presentations <br/> with .red.font-mono[xaringan] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/xaringan.png" width="50px"> ]] ] ] --- class: split-20 .row[.content.vmiddle[ # The potential of R markdown 🙌 ]] .row.split-four.white.font_medium[ .row.split-two[ .column.bg-gray[.content.center[ Insert citations in any format <br/> with .deep-orange.font-mono[citr] ]] .column.bg-black[.content.center[ Use paper templates for popular journals <br/> with .green.font-mono[rticles] ]] ] .row.split-two[ .column.bg-black[.content.center[ Generate word docs and de-render them back to R markdown with edits and tracked changes <br/> with .blue.font-mono[redoc] ]] .column.bg-gray[.content.center[ Create and maintain online books <br/> with .lime.font-mono[bookdown] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/bookdown.png" width="50px"> ]] ] .row.split-two[ .column.bg-gray[.content.center[ Build and maintain package and usage documentation with .pink.font-mono[pkgdown] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/pkgdown.png" width="50px"> ]] .column.bg-black[.content.center[ Organise an analysis project and construct a website for it with .purple.font-mono[workflowr] [<img src="https://raw.githubusercontent.com/workflowr/workflowr-assets/master/img/hex-workflowr.png" width="50px">](https://github.com/jdblischak/workflowr) ]] ] .row.split-two[ .column.bg-amber.black[.content.center[ Create and maintain blogs and academic websites <br/> with .white.font-mono[blogdown] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/blogdown.png" width="50px"> ]] .column.bg-gray[.content.center[ Create slide presentations <br/> with .red.font-mono[xaringan] <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/xaringan.png" width="50px"> ]] ] ] --- class: center <img src="https://github.com/rstudio/hex-stickers/raw/master/PNG/blogdown.png" width="500px"> --- class: split-two center name: steps .row.bg-cyan[.content.vmiddle[ # .amber[Step 1:] Create an academic backbone of a website ]] .row.bg-amber[.content.vmiddle[ # .light-blue[Step 2:] Customize the backbone with your profile and work ]] --- class: split-2-1-1, left name: install-blogdown .row[.content.vmiddle.center[ #Installing .amber[blogdown] ]] .row.bg-amber[ .content.v40[ ###   ⬇️ You can install any package in R with the function .cyan.font-mono[install.packages()] ]] .row.slide-in-right[.content.v40[ ###   ✏️ Open R and just do .amber.font-mono[install.packages("blogdown")] ]] .row[ ] --- class: split-20 .row[.content.vmiddle.center[ # Starting a .amber[new website project] ]] .row.split-30[ .row.slide-in-right.bg-amber[.content.vmiddle[ ###   💯 This will .light-blue[download all the necessary files] to create the backbone of your website ]] .row[.content[ .row.split-two[ .column[.content.nopadding[ <img src="media/dsquintana1.gif" width="100%" /> ]] .column.split-four[ .row[.content.vmiddle[ ### ⬅️ Go to the .amber[File] menu > .amber[New project...] ]] .row[.content.vmiddle[ ### 📁 Name your project in .amber[Directory name] ]] .row[.content.vmiddle[ ### ❗ Make sure to enter .amber[gcushen/hugo-academic] as the Hugo theme ]] .row[.content.vmiddle[ ### ✔️ Keep all other options .amber[the same] ]] ] ] ]] ] --- class: split-25 .row[.content.vmiddle.center[ # Creating an .amber["hugo"] website backbone ]] .row.split-two.center[ .column.split-two.center[ .row[.content.vmiddle[ ### 📚 Load blogdown using the command .amber.font-mono[library(blogdown)] ]] .row[.content[ ### ⬇️ Install the "hugo" framework with .amber.font-mono[blogdown::install_hugo(] ### .amber.font-mono[force = TRUE)] ]] ] .column.split-two.bg-amber.slide-in-right.center[ .row[.content.vmiddle[ ###   🦴 This generates the .light-blue[backbone files] that constitute the template website ]] .row[.content[ ###   📝 Wee will see later how to .light-blue[edit these files to customize] the website ]] ] ] --- class: split-1-2-1 .row[.content.vmiddle.center[ # Building the .amber[template] of the website ]] .row[ .row.split-two[ .column[.content.nopadding[ <img src="media/dsquintana2.gif" width="100%" /> ]] .column.split-two.center[ .row[.content.vmiddle[ ### 🍜 Run the command .amber.font-mono[blogdown::serve_site()] ]] .row[.content.v30[ ### 👀 Run this command every time you want to .amber[check] what your website will look like ]] ] ] ] .row.split-two.slide-in-left.bg-amber[ .row[.content.vmiddle[ ###   📲 This builds a mobile version of your site on the RStudio .light-blue[viewer window] ]] .row[.content.vmiddle[ ###   💻 Copy-paste the .light-blue[server address] into a web browser for a desktop version of your site ]] ] --- class: split-20 name: customize .row[.content.vmiddle.center[ # Let's .cyan[customize] the website! ]] .row.split-70.slide-in-left[ .row.split-two[ .column.split-four[ .row.bg-deep-orange[.content.vmiddle[ ### Control basic information of your website ]] .row.bg-green[.content.vmiddle[ ### Change the general appearance of the website ]] .row.bg-main2[.content.vmiddle[ ### Add your academic content ]] .row.bg-pink[.content.vmiddle[ ### Upload your CV ]] ] .column[.content.center.nopadding[ <img src="media/file-viewer2.gif" width="100%" /> ]] ] .row.split-two.center[ .column.bg-cyan[.content.vmiddle[ ###   📝 You will do this by .amber[editing the files on the project backbone] ]] .column[.content.vmiddle[ ###   ☝️ .cyan[Open] any file by .cyan[selecting] it from your .cyan[file browser] ]] ] ] --- class: split-10 .row[.content.center.vmiddle[ ## Controlling .deep-orange[basic info] on your website ]] .row.split-60[ .row.split-two[ .column[.content.center[ <img src="media/config-toml1.gif" width="95%" /> ]] .column[.content.center[ <img src="media/config-toml2.gif" width="95%" /> ]] ] .row.slide-in-right.split-25[ .column[.content.v20.center[ ## ☝️ Open the .deep-orange[config.toml] file and edit it to: ]] .column.split-three.bg-deep-orange[ .row[.content[ ###   🚩 Change the .amber[title] of your website ]] .row[.content[ ###   🔗 Add the .amber[URL] of your site once you have one ]] .row[.content[ ###   ©️ Add a .amber[copyright]. Just follow the instructions on the file ]] ] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Control the .green[general appearance] of your website ]] .row.split-two[ .column.split-25[ .row[.content.vmiddle.center[ ## 👇 Files in the .green[config/_default] folder will allow you to: ]] .row[.content.nopadding[ <img src="media/config-folder.gif" width="100%" /> ]] ] .column.split-four[ .row.bg-teal[.content.vmiddle[ ### 🍔 Customize the website .amber[menu]. <!-- the elements of the menu and their order within the menu, as well as the menu's general position in the site. --> ]] .row.bg-green[.content.vmiddle[ ### 📬 Modify your .amber[contact] information ]] .row.bg-lime[.content.vmiddle[ ### 🎨 Set the color and font .orange[theme] of the site in any way you want! ]] .row.bg-gray[.content.vmiddle[ ### Extra: 💬 Configure the site in various .amber[languages] (check out an example [website]() and its [code]()) ]] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Customize the website .teal[menu] ]] .row.split-60.bg-teal[ .column[.content.nopadding.center.vmiddle[ <img src="media/blogdown1.gif" width="100%" /> ]] .column.split-two[ .row[.content.vmiddle[ ###   👈 As you probably know, each element of the menu is a .amber[link] that allows users to easily navigate across the content of a site ⛵⛵⛵ ]] .row[.content[ ###   You can control the .amber[position] of the menu, its .amber[content] and the .amber[order] of its elements ]] ] .row[.content[ ]] ] --- class: split-60 teal .column.split-two[ .row[.content.center.nopadding[ .pull-right[<img src="media/menu-position2.gif" width="100%" />] ]] .row[.content.center.nopadding[ .pull-left[<img src="media/menu-position1.gif" width="100%" />] ]] ] .column.split-two[ .row[.content.center.black.bg-teal[ <br/><br/> # Modifying the menu's .amber[position] ]] .row.split-two.slide-in-right[ .row[.content.vmiddle.left[ ###   👈 Go to the "Advanced" section of the .amber[params.toml] file ]] .row[.content.vmiddle.left[ ###   🔁 And just change the .amber[align] parameter ]] ] ] --- class: split-60 teal .column.split-two[ .row[.content.center.nopadding[ <img src="media/menu-order2.gif" width="100%" /> ]] .row[.content.center.nopadding[ <img src="media/menu-order.gif" width="100%" /> ]] ] .column.split-two[ .row[.content.center.black.bg-teal[ <br/><br/><br/><br/> # Modifying the .amber[order] of the menu's elements ]] .row.split-two.slide-in-right[ .row[.content.vmiddle.left[ ### 👈 Go to the .amber[menus.toml] file. Each section starting with .amber["[[main]]"] defines settings of a menu element ]] .row[.content.vmiddle.left[ ### 🏋 Change the .amber[weight] parameter to modify the position of each element relative to other elements ]] ] ] --- class: split-60 teal .column.split-two[ .row[.content.center.nopadding[ <img src="media/menu-content2.gif" width="100%" /> ]] .row[.content.center.nopadding[ <img src="media/menu-content1.gif" width="100%" /> ]] ] .column.split-two[ .row[.content.center.black.bg-teal[ <br/><br/><br/><br/><br/><br/> # Modifying the menu's .amber[content] ]] .row.split-three.slide-in-right[ .row[.content.vmiddle.right[ ### .transp["] #️⃣ Also in the .amber[menus.toml] file, place a .amber[hashtag] symbol at the beginning of a line that defines an element you don't want in the menu ]] .row[.content.vmiddle.right[ ### 📌 This is known as .amber[commenting out] ]] .row[.content.vmiddle.right[ ### 🧁 Extra: Change the .amber[name] argument and see what happens ]] ] ] --- class: bg-white split-20 .row[.content.center.vmiddle[ ## Modifying your .green[contact information] ]] .row.split-70[ .row.split-two[ .column[.content.center[ <img src="media/contact1.gif" width="95%" /> ]] .column[.content.center[ <img src="media/contact3.gif" width="95%" /> ]] ] .row.slide-in-right.split-two[ .column.bg-white[.content.v20.center[ ## ☝️ Go to the .green[Contact details] section of .green[params.toml] ]] .column.bg-green[ .content.v45.center[ ## And simply edit it with your own information 😜 ] ] ] ] --- class: bg-white split-20 .row[.content.center.vmiddle[ ## Customizing the .lime[font and color] themes! ]] .row.split-70[ .row.split-two[ .column[.content.center[ <img src="media/themes-rstudio.gif" width="95%" /> ]] .column[.content.center[ <img src="media/themes-browser.gif" width="95%" /> ]] ] .row.slide-in-right.split-two[ .column.bg-white[.content.v20.center[ ## ☝️ Go to the .lime[Theme] section of .lime[params.toml] ]] .column.bg-lime[ .content.v45.left[ ## And modify the .orange[theme] argument 👨🎨 👩🎨 ] ] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Add .color-main4[content] to your website ]] .row.split-two[ .column.split-25[ .row[.content.vmiddle.center[ ## Files in the 👇 .color-main4[content/] 👇 folder will allow you to: ]] .row[.content.nopadding[ <img src="media/content-folder-v2.gif" width="100%" /> ]] ] .column.split-three[ .row.bg-main4.black[.content.vmiddle[ ### 🧪 🔭 🔬 Edit yours and your colleagues' .amber[bios] ]] .row.bg-main1.gray[.content.vmiddle[ ### .amber[Design] the .amber[content] of your home 👷♂️ 🏠 👷♀️ ]] .row.bg-main2.black[.content.vmiddle[ ### 🤓 Add your .amber[work:] courses, blogposts, projects, publications, tutorials and talks ]] ] ] --- class: split-50 color-main4 .column.split-two[ .row[.content.center.nopadding[ .pull-right[<img src="media/bio1.gif" width="100%" />] ]] .row[.content.center.nopadding[ .pull-left[<img src="media/bio.gif" width="100%" />] ]] ] .column.split-20[ .row.bg-main3[.content.center.black.font2[ Adding your .white[bio] into .white[content/authors/admin/] ]] .row.split-four.slide-in-right.font_medium[ .row[.content.v20.left[ 📸 Add or update a .amber[profile photo] by saving it into this folder ⚠️ Name the file .amber[avatar.jpg] ⚠️ ]] .row[.content.v20.left[ 🎓 Edit your .amber[biography] details (e.g, position, affiliation, education details) in the .amber[_index.md] file ]] .row[.content.v20.left[ 🍹 Add your .amber[social media] details and a link to your Google Scholar profile page, also in .amber[_index.md] ]] .row[.content.left.font1[ 🤝 Add a colleague's bio: Make a new folder into .amber[content/authors/]. Name it whatever you want, but it has to have the files .amber[_index.md] and .amber[avatar.jpg] ]] ] ] --- class: split-20 center .row[.content.vmiddle[ # Design the .color-main3[content presentation] of your home page 🏠 ]] .row.split-two.bg-main1.gray[ .column[.content[ .font_medium[Home content design [sample A](https://emitanaka.org/#about)] <div class="resp-container"> <iframe class="testiframe" src="https://emitanaka.org/#about" width="500px" height="400px"> A blogdown tutorial. </iframe> </div> ]] .column[.content[ .font_medium[Home content design [sample B](https://desiree.rbind.io/#about)] <div class="resp-container"> <iframe class="testiframe" src="https://desiree.rbind.io/#about" width="500px" height="400px"> A blogdown tutorial. </iframe> </div> Go to the [rbind](https://github.com/rbind) project to find more hugo academic website designs. ]] ] --- class: split-20 .row[.content.vmiddle.center[ # Design the .color-main3[content presentation] of your home page 🏠 ]] .row.bg-main1.split-50[ .column[.content.nopadding.center.vmiddle[ <img src="media/home-files.gif" width="100%" /> ]] .column.split-five.color-main4[ .row[.content.font0-85[ The .amber[home page]: "the introductory page of a website, typically serving as a table of contents for the site." ]] .row[.content.v10.gray[ The .amber[widgets]: "components of an interface allowing users to access services and information on demand." ]] .row[.content.font_medium.center[ .font1-5[👈 Each `".md"` file within the folder .amber[content/home/] contains the template for a different widget type] ]] .row[.content.gray[ <br/><br/> Each .amber[.md] file has detailed explanations on how to set up the widget, so take your time to explore those. I **will** give you some general tips next! ]] .row[.content.v50[ <br/>Check all widgets in action [here](https://www.lunasare.com/all-widgets/). Also, go to [Hugo Academic's documentation](https://sourcethemes.com/academic/docs/page-builder/) on widgets ]] ] ] --- class: split-20 .row.split-60.bg-main1.gray[ .column[.content[ # Tips about widget files: ]] .column[.content.center.vmiddle[ # .color-main3[Adding] or .purple[removing] a widget from home ]] ] .row.split-60[ .column[.content.center.nopadding[ <img src="media/widgets-activate.gif" width="100%" /> ]] .column.split-two.slide-in-right.color-main1[ .row[.content.center.vmiddle[ ### 👈 Open up the .amber[.md] file of the widget you want to remove ]] .row[.content.v20.center[ ###   👀 And just change ### .amber[active=true] to .amber[active=false] ]] ] ] --- class: split-20 .row.bg-main1.gray[.content.vmiddle[ # More tips about widget files: ]] .row.split-two[ .row.split-40.slide-in-right[ .column.bg-main1[.content.center.vmiddle[ # The .color-main3[names] of the .md files are actually, ehem, irrelevant ]] .column.split-two.color-main1[ .row[.content.center.vmiddle[ ### 👈 You can use any name for your .md file ]] .row[.content.v20.center[ ###   😮 ]] ] ] .row.split-60.slide-in-left[ .column.split-two.color-main1[ .row[.content.center.vmiddle[ ### Select the .amber[.md] file of the widget you want to duplicate 👉 ]] .row[.content.v20.center[ ###   👯 And simply duplicate the file into the same folder (.amber[content/home/]), using a different name for it ]] ] .column.bg-main1[.content.center.vmiddle[ # .color-main3[Duplicating] a widget in the home ]] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Add .purple[products] of your work ]] .row.bg-purple.split-60[ .column[.content.nopadding.center.vmiddle[ <img src="media/work-content.gif" width="100%" /> ]] .column.split-two[ .row[.content.vmiddle[ ### 👈 Widgets in the home link to your work. This is stored in folders within the .amber[content/] folder ]] .row[.content[ ### The folders .amber[courses/], .amber[posts/], .amber[projects/], .amber[publications/], .amber[slides/] and .amber[talks/] are preset, but you can add as many sections as you need 📂🗃🗄 ]] ] ] --- class: split-20 .row[.content.vmiddle.center[ # Last but not least: .pink[add a PDF of your CV] ]] .row.split60.bg-pink[ .row.split-60[ .column[.content.nopadding.center.vmiddle[ <img src="media/cv-section.gif" width="100%" /> ]] .column.split-two[ .row[.content.vmiddle.center[ ### Add a pdf file of your CV to .amber[static/files/] <br/> and save it as .amber[cv.pdf] ]] .row[.content.v30.center[ ### Go to the the .amber[CV section] of .amber[config/_default/_menus.toml] file and uncomment it (remove the #️⃣ at the beginning of each line) ]] ] ] ] <!-- --- --> <!-- ```{r child='tutorial-blogdown-2020-03-24-bonus.Rmd'} --> <!-- ``` --> --- class: split-20 name: publishing .row[.content.vmiddle[ # I lied, the very last step is... publishing your website! ]] .row.split-two.bg-black.white[ .column[.content.center.vmiddle[ ## Option 1: ### You already have a hosting service <br/> ### Just upload your .amber[public] folder, containing your rendered website! ]] .column.split-two.bg-gray.black[ .row[.content.center[ ## Option 2: ### Use the [netlify](https://www.netlify.com/) hosting service, it is free! <br/> ### You can transfer your domain if you have one, or get one for free -- assigned at random 👻 ]] .row.split-two[ .column[.content.center[ <br/><br/> ## Option 2A ### Upload your website to [Github](https://github.com/) <span><i class="fab fa-github faa-vertical animated "></i></span> ]] .column[.content.center[ <br/><br/> ## Option 2A ### Keep your project local ]] ] ] ] --- class: split-20 name: publishing .row[.content.vmiddle[ # I lied, the very last step is... publishing your website! ]] .row.split-two.bg-black.white[ .column[.content.center.vmiddle[ ## Option 1: ### You already have a hosting service <br/> ### Just upload your .amber[public] folder, containing your rendered website! ]] .column.split-two.bg-gray.black[ .row[.content.center[ ## Option 2: ### Use the [netlify](https://www.netlify.com/) hosting service, it is free! <br/> ### You can transfer your domain if you have one, or get one for free -- assigned at random 👻 ]] .row.split-two[ .column.bg-amber.indigo[.content.center[ <br/><br/> ## Option 2A ### Upload your website to [Github](https://github.com/) <span><i class="fab fa-github faa-vertical animated "></i></span> ]] .column[.content.center[ <br/><br/> ## Option 2A ### Keep your project local ]] ] ] ] --- class: center name: break .left[## Time for a break and/or questions!] <br/><br/> <img src="https://media1.tenor.com/images/36b890838130e2004a3b9dca9949f2dc/tenor.gif?itemid=8779191" width="450px"/>