[{"content":"With AI coding, I can build things faster than ever. Yet I\u0026rsquo;ve never felt less in control.\nLast November, with the launch of GPT 5.1 and Claude Opus 4.5, something changed: AI started producing production-ready code in minutes.\nSince then, I\u0026rsquo;ve found myself thinking about building more things. In the past, a lot held me back: where should I start? Should I learn more frontend and backend before diving in? Now AI can put together a project in minutes, and I can study the code afterwards.\nBut at the same time, I feel like I\u0026rsquo;m losing control over the projects. I\u0026rsquo;m not writing the code myself, and I have no idea what exactly each line of code does.\nIf AI writes most of the code, what should we actually learn — and how?\nWhat to Learn Regaining Control I used to think I could only truly understand a project if I understood, or even wrote every line of code myself.\nNow that AI writes most of the code, we need to change our perspective and see AI coding as a higher level of abstraction. It produces modules and functions. As long as these parts pass tests and behave as expected, we can use them without knowing every implementation detail.\nWhen scripting languages such as JavaScript and Python came out, some programmers argued that these were not \u0026ldquo;real\u0026rdquo; programming languages like C or assembly, because they used a higher level of abstraction and did not compile directly to native machine code in the same way. Today, these scripting languages are widely used. We may see AI coding as an even higher level of abstraction.\nBut abstraction does not mean blind trust. We regain control by managing module boundaries and risks: what each module is responsible for, what goes in and out, how it fails, and what breaks if we change it. Tests and clear interfaces make this practical. We do not need every detail; we need to know where the risks are and how to check them.\nThis is control at a higher level. The skills behind it are what we turn to next.\nThe Core of Coding Skills I used to think that if AI did the coding, my coding skills would be hard to improve without deliberate practice. However, as Pascal CESCATO pointed out in our conversations about AI coding, \u0026ldquo;(With AI coding,) I feel that I can spend more time thinking about the system instead of spending hours translating my thoughts into syntax.\u0026rdquo;\nThis leads me to ask what really matters—the core of coding skills. Syntax still matters, but translating ideas into code is no longer the bottleneck. What matters more is the ability to decompose a problem, choose the right abstractions, design clear interfaces, model data, trace control flow, evaluate trade-offs, and verify behavior. These are the skills that let you supervise AI output rather than merely accept it.\nWhen we read AI-generated code, we should treat it as a design to be examined, not just a result to be accepted. Identify the key decisions: where the module boundaries are, why the interfaces look the way they do, how data is modeled, and which dependencies point in which direction. Then ask whether we would have made the same choices—and what trade-offs those choices imply.\nWe do not need to study every line, but need to understand the structure well enough to test it and improve it. That kind of understanding is best built in real projects.\nHow to Practice: Through Projects Some might argue that basics like syntax are the foundation of coding. If you don\u0026rsquo;t even practice and master them until they become muscle memory, how can you master higher-level skills like architecture?\nDon\u0026rsquo;t get me wrong—syntax and other basics are very important; we need to master them. But instead of typing the same lines of code over and over to memorize them, we can now learn them by using them in a project. This approach is more effective.\nStart with a project you are interested in. Let AI build the first version.\nThen read it as a design: map the modules, trace the data, check the interfaces, and ask what trade-offs it makes.\nFinally, rewrite the core part yourself—the part where the real design decisions live—so you use the fundamentals without writing boilerplate again and again.\nI had a similar experience before the AI era. When I was learning list comprehensions in Python, I typed out the examples, but I didn\u0026rsquo;t use them in my own code. Some time later, I forgot how to use them.\nThen, in a Kaggle competition, the dataset had a huge number of columns. How should I select a few to analyze? In a highly upvoted notebook, the author used list comprehensions to select columns and extract the data. Its elegance impressed me. I had learned the syntax, but I did not know I could apply it to the dataset. Following the notebook\u0026rsquo;s example, I tried selecting different columns as I wanted. After that, I finally knew how to use list comprehensions. Learning them in context was far more effective than studying examples.\nFinal Thoughts So what should we learn in the age of AI? The same things that have always mattered—just in a different way.\nWe still need to learn the fundamentals, but we learn them best by using them in real projects.\nWe still need to understand code, but not every line.\nWe regain control not by writing every line of code ourselves, but by understanding how the system fits together and why some parts matter more than others.\nSpecial thanks to Pascal CESCATO . Our conversations inspired this post.\n","permalink":"https://juliecodestack.github.io/2026/09/12/what_to_learn_when_ai_writes_code/","summary":"\u003cp\u003e\u003cstrong\u003eWith AI coding, I can build things faster than ever. Yet I\u0026rsquo;ve never felt less in control.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eLast November, with the launch of GPT 5.1 and Claude Opus 4.5, something changed: AI started producing production-ready code in minutes.\u003c/p\u003e\n\u003cp\u003eSince then, I\u0026rsquo;ve found myself thinking about building more things. In the past, a lot held me back: where should I start? Should I learn more frontend and backend before diving in? Now AI can put together a project in minutes, and I can study the code afterwards.\u003c/p\u003e","title":"Now that AI writes code, what should we actually learn?"},{"content":"In the past, I spent a lot of time on exploratory data analysis(EDA) and data cleaning before putting data into training. After that, I’d like to pick a state-of-the-art model. However, fastai course changed my idea.\nIn fastai, Jeremy told us to:\ntrain a model to clean the data start with a simple model The key point is to start the training as early as possible, preferably on day 1. Only after training a model and analyzing the result can you know what kinds of data the model deals with badly, whether the data needs more cleaning, whether the data is enough, whether the problem can be solved using deep learning. This produces an effective feedback to the data part and helps you figure out the truly important feature, which leads to better training.\nStart with a simple model, so you can train it quickly, then improve and iterate fast. After some experiments, finally you may decide whether the performance of the current model is good enough or need to try a more sophisticated model.\nThis echoes “Finish first, then improve” and target-oriented practice in management. Without training a model, you have no idea about the characteristics of the data. EDA is not enough. Sometimes we may understand the data in a wrong way, leading to the wrong direction of building a model.\nNext time you handle a dataset, you may try this method: only do necessary data cleaning to get the data into the model, then begin with a simple model. For example, always start with a small size pre-trained model for image or text data, or random forest for tabular data. After the training, analyze the results to clean the data or do feature engineering. fastai library provides some handy functions for analysis, for example, confusion matrix, feature importance, etc.\n","permalink":"https://juliecodestack.github.io/2023/12/27/data-cleaning-or-training/","summary":"\u003cp\u003eIn the past, I spent a lot of time on exploratory data analysis(EDA) and data cleaning before putting data into training. After that, I’d like to pick a state-of-the-art model. However, fastai course changed my idea.\u003c/p\u003e","title":"Which comes first, data cleaning or model training?"},{"content":"Can you believe it? On the very first class of fast.ai course: Practical Deep Learning for Coders 2022, I trained an image classification using fastai to tell apples from peaches. (you may click Kaggle link to have a look). Amazing!\nYou may wonder: can I make it too?\nYes, of course. Then how to do it? Let\u0026rsquo;s dive into it.\nfastai library is a library built on top of PyTorch and other libraries. With it, we beginners can use the modules to build a model and “play the whole game”. As we learn more, we’ll dig into more details.\nI followed Professor Jeremy Howard\u0026rsquo;s example code ( Is it a bird? Creating a model from your own data | Kaggle) to train a model to tell whether the fruit in a picture is an apple or a peach.\nThe whole process contains four steps, as shown in the figure below:\nFigure1. training a deep learning model pipeline Step 0: Collect data If you don’t have a dataset, you need to start from this step. In the fast.ai course example code, DuckDuckGo or Bing search api is used to search for images.\nStep 1: Prepare the data In fastai a DataBlock class is provides as a template for you to define the data, then the dataloaders pack the data into batches so that we can do the training in parallel using GPU.\ndls = DataBlock(here to set some parameters).dataloaders(path,bs=32) We’ll talk more about DataBlock later.\nStep 2: Training the model fastai does the training for you, and you just need to set data(dls), model(resnet18) and metrics. It takes only two lines of code:\nlearn = vision_learner(dls, resnet18, metrics=error_rate) learn.fine_tune(5) In a minute, the model will be trained.\nTo accelerate the training, here we use a pre-trained model and finetune it. You may wonder, what is a pre-trained model?\nWe do the training to find a set of optimal parameters for the model. A pre-trained model has been trained on a large dataset and sets a good basis, so we don’t need to find the optimal parameters from start, and the training process is accelerated.\nStep 3: Use the model to predict Now it’s time to test your model on a new image.\ncateg,idx,probs = learn.predict(PILImage.create(\u0026#39;test-photo.jpg\u0026#39;)) print(f\u0026#34;This is a photo of {categ}, with a prbability of {probs[idx]:.4f}\u0026#34;) Dig into DataBlock You may suppose you’ll spend most of the time on the training step, things like model architecture, learning rate and so on. However, Jeremy said that DataBlock is the key thing you want to get familiar with as a beginner, because “the main thing you\u0026rsquo;re going to be trying to figure out is how do I get this data into my model?”\nThat’s true. When I tried to do a data competition or a little project, I often found the data cleaning and preparation were tricky. Sometimes I got stuck on this stage.\nSo let’s see how to define DataBlock . As to computer vision problems, we need to answer the following questions:\nWhat kinds of data are the inputs(data) and outputs(label)? Defined by blocks. Where is the input data? Defined by get_items. Do we need to apply something to the input? Defined by get_x. How to get the label? Defined by get_y. How to split train and valid data? Defined by splitter. Do we need to apply something on formed items? Defined by item_tfms, it’s often used to resize the images to be the same size. Do we need to apply something on formed batches? Defined by batch_tfms, it’s often used for data augmentation. For example, in the fastai example code, different categories of images are stored in different folders for training, the dataloaders is constructed using the following code:\ndls = DataBlock(blocks=(ImageBlock,CategoryBlock), get_items=get_image_files, get_y=parent_label, splitter=RandomSplitter(valid_pct=0.2,seed=42), item_tfms=Resize(192) ).dataloaders(path,bs=32) Here (ImageBlock,CategoryBlock) means that the input is image, and the output(label) is categorical variable. In this dataset, different categories of images are stored in different folders, so get_y defines to be parent_label.\nblocks, get_items, get_y, splitter, item_tfms are the parameters you’re going to set every time using DataBlock.\nWe can set batch transform to the same dataset as follow:\ndls = DataBlock(blocks=(ImageBlock,CategoryBlock), get_items=get_image_files, get_y=parent_label, splitter=RandomSplitter(valid_pct=0.2,seed=42), item_tfms=RandomResizeCrop(192,min_scale=0.5) batch_tfms=aug_transforms() ).dataloaders(path,bs=32) What’s more, the label defining methods may be different for different datasets. For example, in the PETS dataset, the label is defined by the lowercase or uppercase of the file name.\npath = untar_data(URLs.PETS)/\u0026#34;images\u0026#34; def label_func(fname): return \u0026#34;cat\u0026#34; if fname.name[0].isupper() else \u0026#34;dog\u0026#34; dls = DataBlock(blocks=(ImageBlock,CategoryBlock), get_items=get_image_files, get_y=label_func, splitter=RandomSplitter(valid_pct=0.2,seed=42), item_tfms=Resize(192) ).dataloaders(path) If you look at the fastai example code, you may notice that it uses dls=ImageDataLoaders.from_name_func() to define dataloaders. It’s a factory method for some datasets. When I first learned it, I got a little confused and didn’t know which function to use, so my advice is to learn DataBlock, as it can be used for all kinds of datasets and saves your time.\nFor more details, you may read fastai - Data block tutorial.\n","permalink":"https://juliecodestack.github.io/2023/12/26/train-first-image-model-using-fastai/","summary":"\u003cp\u003eCan you believe it? On \u003ca href=\"https://course.fast.ai/Lessons/lesson1.html\"\u003ethe very \u003cstrong\u003efirst class\u003c/strong\u003e \u003c/a\u003eof fast.ai course: Practical Deep Learning for Coders 2022, I trained an image classification using fastai to tell apples from peaches. (you may click \u003ca href=\"https://www.kaggle.com/code/juliecodestack/which-fruit-is-it-apple-or-peach-fast-ai/notebook\"\u003eKaggle link\u003c/a\u003e to have a look). Amazing!\u003c/p\u003e\n\u003cp\u003eYou may wonder: can I make it too?\u003c/p\u003e\n\u003cp\u003eYes, of course. Then how to do it? Let\u0026rsquo;s dive into it.\u003c/p\u003e","title":"How to train an image classification model using fastai?"},{"content":"On this website, I put my email link at the end of each post in place of the comment system. This was inspired by Eli Bendersky\u0026rsquo;s website. How to make it?\nThe following are the steps:\nGo to YourSite \u0026gt; layouts \u0026gt; _default \u0026gt; single.html. You’re going to add the mailto link after the \u0026lt;main\u0026gt;...\u0026lt;/main\u0026gt; part (corresponding to the main body of the post). Let’s start with a simple link:\n\u0026lt;a href=\u0026#34;mailto:your_email@example.com\u0026#34;\u0026gt; EmailLink \u0026lt;/a\u0026gt; Open Git Bash Command on YourSite folder, and enter hugo server to see the pages locally. You’ll see that after each post, there is an EmailLink. When you click the link, the mail app will be opened and the address(your_email@example.com) is already in the receiver field.\nIf you’d like to add the subject and body to the mailto link, you may use the following script:\n\u0026lt;a href=\u0026#34;mailto:your_email@example.com\u0026#34;?subject=subject\u0026amp;body=text\u0026gt; EmailLink\u0026lt;/a\u0026gt; Or you can go to the site Mailto link generator , enter the content and generate it.\nI want to put a sentence at the end of each post: “Thank you for reading! For comments or discussions, please send me an email.” In HTML, \u0026lt;a\u0026gt;\u0026lt;/a\u0026gt; contains links. \u0026lt;p\u0026gt;\u0026lt;/p\u0026gt; contains paragraphs(pure text) . So here’s what I finally wrote in single.html:\n\u0026lt;p\u0026gt;Thank you for reading! For comments or discussions, please send me an \u0026lt;a href=\u0026#34;mailto:my_email\u0026#34;\u0026gt;\u0026lt;u\u0026gt;email✉️\u0026lt;/u\u0026gt;\u0026lt;/a\u0026gt;.\u0026lt;/p\u0026gt; Here the \u0026lt;u\u0026gt;\u0026lt;/u\u0026gt; underscores the mailto link for I found the link was not highlighted on the page. As for the sign of envelope✉️, I copied the Emoji from the Internet.\nReferences:\nMailto Link – How to Make an HTML Email Link\nMailto link generator\n","permalink":"https://juliecodestack.github.io/2023/12/05/add-mailto-link/","summary":"\u003cp\u003eOn this website, I put my email link at the end of each post in place of the comment system. This was inspired by \u003ca href=\"https://eli.thegreenplace.net/2018/turning-off-blog-comments/\"\u003eEli Bendersky\u0026rsquo;s website\u003c/a\u003e.  How to make it?\u003c/p\u003e","title":"How to add a Mailto link on each page in Hugo?"},{"content":"Several months ago I switched this site from Hexo-building to Hugo-building. Some readers asked me why the move and how to do it, so here I’d like to share my experience with you.\n1. Hugo v.s. Hexo Both Hexo and Hugo are static site generators, so why did I choose Hugo?\nHugo is super fast. At first I thought it means the page load time is short, so my readers could view the pages of my site instantly, and that’s the reason I decided to switch to Hugo. Later I realized it refers to the site building speed ( \u0026lt; 1ms per page according to Hugo site ), which means I can build the site fast and preview the changes in real time. It’s really a benefit, especially when you have written hundreds of articles, for you can still build your site in seconds (or even in a second) .\nBesides, Hexo depends on Node.js. Sometimes when you install a wrong version of Node.js, it leads to problems. You don’t need to worry about that in Hugo because you don’t need to install external dependencies for it.\nWhat about Hugo’s drawbacks?\nFrom my experience, compared with Hexo, the site configuration of Hugo is a bit difficult for beginners. Hexo provides a default theme for you to begin with. While in Hugo, at first you have to pick a theme and install it. Besides, Hexo has a site configuration as well as a theme configuration. The site configuration fits all themes and saves your time when you change the theme. While Hugo has only one configuration file, and different themes have different settings, which makes beginners a little confused.\n2. How I switched from Hexo to Hugo? Since I have written some posts on the Hexo site, the main question is how to switch to Hugo without changing the links of the posts. I find this article helpful, so I followed the instructions in it to make the change.\n2.1. Generate the pages by Hugo locally First I followed the step0 and step1 in my first tutorial to build a Hugo site. Then:\n(1) Copy the posts from MyHexoSite \u0026gt; source \u0026gt; _posts to MyHugoSite \u0026gt; content \u0026gt; post folder.\nPlease use copy , not move , so that if something went wrong, you can go to MyHexoSite folder and try it again. And I also advice you to make a backup of MyHexoSite folder.\n(2) Change the front matter of the posts.\nIn Hexo the the published date is formatted as date:yyyy-mm-dd HH:MM:SS , while in Hugo a time zone needs to be added. For example, in my articles the format is date:yyyy-mm-ddTHH:MM:SS+08:00 .\n(3) Change the image links ( You may read Step1.5 in my first tutorial first)\nFor local images:\nCopy all images from MyHexoSite \u0026gt; source \u0026gt; _posts \u0026gt; imgs folder to MyHugoSite \u0026gt; static \u0026gt; imgs folder, then change the links in the markdown files.\nIf in Hexo the link is like:\n![image1_title](imgs/image1.jpg) In Hugo it’s changed to:\n![image1_title](/imgs/image1.jpg) If in Hexo the link is like:\n\u0026lt;img src=\u0026#34;imgs/image1.jpg\u0026#34; alt=\u0026#34;image1_title\u0026#34; align=center /\u0026gt; Here align=center is optional. It’s set to display the image in the center of the line.\nIn Hugo it’s changed to:\nFor web images:\nIf in Hexo the link is like:\n![image2_title](image2_weblink) You can keep the links as the same.\nIf in Hexo the link is like:\n\u0026lt;img src=\u0026#34;image2_weblink\u0026#34; alt=\u0026#34;image2_title\u0026#34; align=center /\u0026gt; You need to remove the double quotes around image2_weblink and image2_title.\n(4) permanent link\nTo be consistent with the URL of my Hexo site, I set the permanent links in the config.toml of the Hugo site as:\n[permalinks] post = \u0026#34;/:year/:month/:day/:filename/\u0026#34; I used the Next theme of Hexo. You may need to refer to the links of your own Hexo site before setting the permalinks.\n2.2. Push to GitHub for the first time (1) Save the links of several articles of your Hexo site. Later you can use them to check the links of your Hugo site.\n(2) Follow the step2 in my first tutorial, except one thing. Because I have pushed Hexo-generated pages to GitHub before, the GitHub repository was not empty, the first time I added -f after git push as follows:\ngit add . git commit -m \u0026#34;YourCommitMessage\u0026#34; git push -f upstream master From the next time I use git push upstream master .\n(3) Clicking the links saved in step(1) and check whether the links point to the same articles as before.\nReferences Comparison of Hexo and Hugo: https://www.stackshare.io/stackups/hexo-vs-hugo Switch from Hexo to Hugo: https://jdhao.github.io/2018/10/10/hexo_to_hugo/ ","permalink":"https://juliecodestack.github.io/2023/04/25/hexo-to-hugo/","summary":"\u003cp\u003eSeveral months ago I switched this site from Hexo-building to Hugo-building. Some readers asked me why the move and how to do it, so here I’d like to share my experience with you.\u003c/p\u003e","title":"Switching from Hexo to Hugo"},{"content":"Maybe you want to add a Table of Contents ( TOC ) to the articles on your Hugo site but don’t know how to do it, or maybe you want to insert a TOC somewhere in the middle of your post. This is the tutorial for you.\n1. The TOC configuration First you need to see if your Hugo theme contains Table of Contents ( TOC ) settings. Open the config.toml file in your Hugo site folder ( Later we’ll call it YourSite in this article ), find the parameter tableOfContents ( or toc ), set it to be true like this:\ntableOfContents = true Then, if your Hugo theme has a TOC configuration, a TOC will be added at the beginning of every post.\nQ: What if I don’t want to show the TOC of one article?\nA: Go to the front matter of that article, and set:\ntoc: false Then only the TOC of that article won’t be shown.\n2. How to insert a TOC in the middle of your post? However, some Hugo themes don’t have Table of Contents ( TOC ) settings, or you may want to insert a TOC somewhere in the middle of the post. In that case, you can use Hugo shortcodes.\nHugo Shortcodes Page introduces shortcodes as this:\nA shortcode is a simple snippet inside a content file that Hugo will render using a predefined template.\nWe can think of a shortcode as a function. When we call it, Hugo will render in the way the shortcode defined.\nHow to use shortcodes?\nAdd the following line to anywhere you you want to use the shortcode in the markdown article:\nActually, if you’ve read my first tutorial , you may have already used shortcodes. In it the shortcode figure is used to display an image and its title.\nfigure is a built-in shortcode. There is no built-in shortcode for Table of Contents ( TOC ) , so we need to define it, which is a bit hard for beginners. Thankfully the author of Hugo theme hugo-octopress has done it for us. You just need to download this repository on GitHub . Go to YourSite \u0026gt; layouts folder, create a shortcodes folder in it if it doesn’t exist. Then copy the toc.html from the downloaded Hugo-Shortcodes \u0026gt; shortcodes folder to YourSite \u0026gt; layouts \u0026gt; shortcodes folder.\nTo insert TOC somewhere in your article, just write a line:\nFor example, I add a TOC here:\n1. The TOC configuration 2. How to insert a TOC in the middle of your post? 3. Set the range of headings to be displayed References 3. Set the range of headings to be displayed Sometimes you may find the page doesn’t show all the headings, and you can fix it by setting in YourSite \u0026gt; config.toml:\n[markup] [markup.tableOfContents] startLevel = 3 endLevel = 5 The startLevel and endLevel refer to the highest and lowest levels of the headings to be shown. For example, the above setting means that the TOC only shows headings between level 3 and level 5.\nReferences Hugo Shortcodes Page\nThe author of the hugo-octopress theme introduced the use of shortcodes in detail and I find it helpful : https://github.com/parsiya/Hugo-Octopress/blob/master/README.md#shortcodes\n","permalink":"https://juliecodestack.github.io/2023/04/21/hugo-toc/","summary":"\u003cp\u003eMaybe you want to add a Table of Contents ( TOC ) to the articles on your Hugo site but don’t know how to do it, or maybe you want to insert a TOC somewhere in the middle of your post. This is the tutorial for you.\u003c/p\u003e","title":"Hugo: How to add a table of contents (TOC) to your post?"},{"content":"A personal website is a good place to display your work, either your projects or your technical notes. Then how to build one? In this article I’ll introduce the simplest way to build a site.\nSite-Building Pipeline There are two kinds of sites: static sites and dynamic ones.\nStatic sites generate web pages locally, and put them on the server, so every user will get the same view when they click the link.\nDynamic sites display different pages to different users on their requests, so it need things like databases.\nAs beginners, we choose the simpler one — static sites, and it’s easy to follow after you learn the pipeline.\nFigure1. The pipeline of building a static website As shown in the figure above, there are two main steps in building a static website:\nGenerate pages locally. The popular static site generators (or frameworks) are JekyII, Hugo, Hexo, etc. Here we’ll use Hugo as an example. Many people (including me) like Hugo because it’s super fast to build a site. Deploy the site to the server. Here we’ll use GitHub as the server to store the pages. Not that hard, right ? Now let’s dive into the details.\nStep 0 : Preparation Install Git . We will use Git Command to generate website, connect to GitHub and push web pages to it.\nStep 1 : Generate pages locally 1.1 Install Hugo Go to Hugo Installation Page , and find the corresponding installation for the operating system you’re using.\nI’m using Windows and I haven’t installed Chocolatey or Scoop, so I installed Hugo using binary files following this installation tutorial . If you’re in the same case as mine, you may follow the steps below to install Hugo.\nIn the following steps, YourUserName refers to the user name of your Windows-system computer. More specifically, it’s the name displayed on the screen when you login in Windows.\n(1) Go to folder C:\\Users\\YourUserName, and create a bin folder in it if it doesn’t exist. The bin folder is the place to store the Hugo binary file.\n(2) Add the bin folder to PATH. In Windows Taskbar Search Box, enter cmd and select the Command Prompt result ( right click and choose the “Run as administrator” option ). In Command Prompt, enter :\nsetx PATH \u0026#34;C:\\Users\\YourUserName\\bin;%PATH%\u0026#34; Then close and reopen the Command Prompt again, enter echo %PATH% to check if bin has been successfully added to PATH.\n(3) Download .zip file from Hugo release page on GitHub . Be Sure to choose the extended version, which will be found near the bottom of the list of archives.\nFrom the .zip extract the binary file hugo.exe and move it to the bin folder. After that, open Command Prompt and enter :\nhugo version If Hugo is successfully installed, you will see a series of characters about information including Hugo version, operating system, build date.\n1.2 Create a Hugo site Supposing you use FolderA to store your site files. Right click FolderA, and select “Git Bash Here” in the menu to open the Git Bash Command. Now enter:\nhugo new site MySite Then a new folder named MySite will be created in FolderA, that is your Hugo site.\n1.3 Pick a theme and configure the site Since a new site has been created, maybe you’d like to see what your Hugo site looks like, but wait a minute, you have to choose a theme first.\nWhat is a theme?\nYou can regard it as the design of your website. Hugo Themes site has many different themes. When you pick a theme, you can download it from its GitHub repository.\nHow to pick a theme?\nHere I’d like to give you some advice to save your time on choosing themes, for I’ve spent a lot of time on Hugo themes, picking one, configuring it and then changing to another one.\n(1) A theme that has an exampleSite folder is easier to use. Different themes have different settings, for example, on choosing which folder to store the posts. The most important file in exampleSite is the config.toml ( or config.yml, or config.json ) file, which provides an example for your configuration, so you know which parameters to tweak to get the desired result. Without exampleSite, you’ll need much more time to configure it.\n(2) When previewing the theme, you need pay attention to some features that you’ll use. For example, if you write technical articles, you should check whether the theme displays Math equations and highlights code blocks well.\nAfter I pick a theme, how to configure it?\nCopy the theme folder you’ve downloaded into MySite \u0026gt; themes folder.\nIf the theme folder contains exampleSite, you can copy the files in exampleSite to MySite folder. After that, copy other folders except exampleSite ( especially archetypes, layouts, static folders ) to MySite folder.\nSome themes don’t have exampleSite. If you’re a beginner, I don’t recommend you to use it now, because you’ll spend much more time to figure out how to set the parameters. When I wrote this article, I was using Hyde as the theme of my site . I like its simple design. It doesn’t have exampleSite . However, I have used several themes before, so I used config file of the previous themes and changed some parameters to set as the Hyde Theme.\nThen Open Git Bash Prompt on MySite folder, and enter :\nhugo server When it’s done, open the URL displayed in your terminal, and you’ll see the example site locally. If you change the parameters in config.toml, the page will make corresponding changes at the same time. In this way, you can configure your site.\nIn the future, when you write a new post or make some revisions, you can still use hugo server to view your site locally before pushing to GitHub.\n1.4 Write posts To create a new post, open Git Bash Command on MySite folder, and enter :\nhugo new new_post.md It will create a new markdown file named “new_post” in MySite \u0026gt; content folder. But if you use hugo server, you may not see the new post. Why?\n(1) Depending on the theme you choose, you may need to put the new_post.md into post (or posts ) folder in the content folder to generate the web page. In this case, you can also enter the following command to create a new post :\nhugo new post/new_post.md (2) Open the new post in your editor (Typora, VS Code, etc). In the header of the post , there are settings about the post (it’s also called front matter). Find draft: true , which means this post is a draft and you don’t want to publish it now. Change it to draft: false so that the post will be published on the site. Besides, the title in the header refers to the title of the post, and it is set to be the file name when created (for example, “new_post” here) . You can change it to whatever you want in your editor.\n1.5 How to display images? Although many tutorials didn’t mention how to insert and display images, I think for beginners it’s an important part in the building process, for you may add pictures to make your article easier to understand or look better.\n1. For local images In Hugo, the local images are stored in MySite \u0026gt; static folder in order to be displayed. Supposing you have an image named image1.jpg, after putting it into the static folder, you can insert it in your post this way :\n![image1_title](/image1.jpg) Or you may put all images in one folder : MySite \u0026gt; static \u0026gt; imgs, then insert the image in your post by :\n![image1_title](/imgs/image1.jpg) But the above method doesn’t display the title of the image. If you want to show the title along with the image, you can use :\nHere please notice the space between the angle brackets ( \u0026lt; and \u0026gt; ) and the content.\nThe pipeline figure you’ve seen in “Site-Building Pipeline” Section was inserted in this way.\n2. For web images If your image is stored on the web, you can insert the image using its web link by one of the three ways below:\nIn way-2 and way-3, there are no double quotes around image2_weblink or image2_title, i.e. write image2_weblink, not “image2_weblink”.\nTake the Python Logo from the python.org as an example. Insert the image using the three ways:\nWay-1:\nWay-2:\nPython-logo Way-3:\nStep 2 : Deploy the site to GitHub 2.1 Create a GitHub repository Log in GitHub and create a public repository named YourGitHubName.github.io, this is where you’re going to store your web pages on GitHub so that others can view your site. Here please make sure YourGitHubName is the same as your GitHub username.\n2.2 Build your site and push it to the repository on GitHub I followed the steps introduced in this tutorial .\nThings you need to do before deploying for the first time:\nFor the first time, you need to connect MySite \u0026gt; public folder to your GitHub repository. The public folder is the place to store your site files after they are generated by Hugo. Connect it to your GitHub repository, so that the site files will be synchronized on GitHub.\nOpen Git Bash Command on MySite folder, enter :\ncd public git init git remote add upstream https://github.com/YourGitHubName/YourGitHubName.github.io.git After that, set the parameter baseurl in config.toml to be your GitHub repository above :\nbaseurl = \u0026#34;https://YourGitHubName.github.io/\u0026#34; The following are the things you do every time you push your site to GitHub:\nFirst generate the site files:\nOpen Git Bash Command on MySite folder, enter :\nhugo When it’s done, Hugo will generate the site files and store it in the public folder.\nThen we’ll push these files to GitHub, continue to enter:\ncd public git add . git commit -m\u0026#34;your_commit_message\u0026#34; git push upstream master The above commands use git remote add upstream... and git push upstream master, I also used these two commands. I saw a tutorial use origin instead of upstream, i.e. git remote add origin... and git push origin master, which also works. You may have a try.\nFuture Work Some tutorials introduced GitHub Actions for automating the deployment, and next I’m going to learn it.\nReferences Hui Gong: How to build personal blog using GitHub Pages and Hugo\nFlavio Copes: How to start a blog using Hugo\nHugo installation : https://www.brycewray.com/posts/2022/10/how-i-install-hugo/\nSet the Hugo theme quickly: https://www.tomasbeuzen.com/post/making-a-website-with-hugo/ (I wish I had read the step 4 in it about the configuration of website earlier, it’s efficient.)\nDeploy Hugo site to GitHub : https://jdhao.github.io/2018/10/10/hexo_to_hugo/\n","permalink":"https://juliecodestack.github.io/2023/04/13/build_hugo_site/","summary":"\u003cp\u003eA personal website is a good place to display your work, either your projects or your technical notes. Then how to build one? In this article I’ll introduce the simplest way to build a site.\u003c/p\u003e","title":"How to build a personal website using GitHub pages and Hugo?"},{"content":"Whenever you write something, an article, a blog post or a paper, you may have a question: “how to write it so that my readers will like it”? In his lecture “Writing Beyond the Academy”, Professor Larry McEnerney from The University of Chicago gave his advice.\nWhat’s the Key Factor of Good Writing? What are the characteristics of good writing ?\nConcise? Clear? Well-structured? Persuasive? Interesting?…\nProfessor McEnerney said good writing has four crucial characteristics, as shown in the following picture:\nFigure1. Four Factors of Good Writing Among them, valuable is the key factor. Without value, the other three factors are meaningless, because readers don’t care it and won’t read.\nThis writing advice is not about text style and rules. It’s about the content. We thought that writing is to express ourselves, but Professor McEnerney has a different view. “ Your writing aims not to review your mind, nor to show what you know about the world, but to change what your readers think about the world, or how they do. ” So before writing, you should think about:\nWho are your specific readers? What your readers value? These two questions are very important. They can help us to find out what content our readers like.\nTake myself as an example. I reviewed my previous articles published and found articles about the solution of a particular problem are popular. If you came across a problem in setting up a software, in debugging, probably someone else would have the same problem and your solution can help them. On the other hand, my notes on a book or a lecture are less viewed.\nWhat is the difference between these two kinds of articles that leads to more views or less?\nI figure it’s because the particular problem-solving articles have specific readers (people who have similar problems), while the note articles don’t (originally wrote for my future review). While these notes are useful to me, they’re not so valuable to my readers.\nTechniques Professor McEnerney also introduced some techniques for good writing.\n1. What is a good opening? The following are three kinds of openings of paper:\n(A) tells what the paper will be about …\n(B) tells what the paper will argue that …\n(C) tells you what question the paper will answer.\nWhich one do you think is better? Or, in which one you’d like to read the following paragraphs?\nIt’s (C). Do you remember how many times when you read an article opens with “In this article I’ll talk about…” and you stopped reading, because you had no interest. That’s the shortage of (A). It just tells the readers what you think about, while the readers may not care. (C) leaves room for your readers. A questions is open. Readers can think about it with you.\nAn even better opening is: tells you what question you have the paper will answer, or what you need the paper will give.\nWho will say no to a paper that can help them solve their problems?\nLet’s see an example. Here’s two kinds of opening of a lawyer’s letter to his client:\n(1) “This letter is about the change of tax….”\n(2) “Dear Client, you asked about the change of tax… Here’s what you need…”\nIf you’re the client, which one would you like to read?\nOf course it’s letter (2). Just reading the beginning, you may get a feeling that letter (1) is sending to all the clients, while letter (2) is directly for you, to help you with your question.\nOne more thing to notice : how many this kind of notification letters do you receive every day? Did you ever read these letters carefully? That is, readers don’t trust you. They think you will waste their time. So from the beginning of your paper, you should think of your readers, what they value/need/care, and provide with it.\n2. Pay Attention to the Subjects of Sentences Look at the following two sentences :\n(1) The dog chased the cat.\n(2) The cat was chased by the dog.\nWhich one is more concise? The first one?\nIt depends. For dog-lovers, (1) is more concise, while for cat-lovers, it’s (2).\nWhy?\nThe subject is the focus of a sentence. Readers first see the subject and implicitly think about it. So you should pay attention to the subjects of your sentences. What\u0026rsquo;s the topic in the subjects? Do your readers care about them? If the answer is no, you need to adjust the structure of sentences to make the subject on reader-valuable topic.\nSummary This great lecture will change your mind from just writing what you think about to writing what your readers value. In a word, to write well, you should get a sense of your readers and create value for them.\n","permalink":"https://juliecodestack.github.io/2023/02/01/valuable_writing/","summary":"\u003cp\u003eWhenever you write something, an article, a blog post or a paper, you may have a question: “how to write it so that my readers will like it”? In his lecture “Writing Beyond the Academy”, \u003ca href=\"https://news.uchicago.edu/story/how-one-scholar-shaped-writing-generations-students\"\u003eProfessor Larry McEnerney from The University of Chicago\u003c/a\u003e  gave his advice.\u003c/p\u003e","title":"How to write a popular article?"},{"content":"We know that the boolean value of 0 is False, and the boolean value of 1 is True. What about the boolean value of a negative number, for example, -2 ? What’s the result of the expression True and 3 in Python? Is it True or False, or other value? Let’s find it out.\n1. Boolean Value Here is a question I came across while I was doing a lab of Berkeley CS61A Course . What would Python print?\n\u0026gt;\u0026gt;\u0026gt; positive = 28 \u0026gt;\u0026gt;\u0026gt; while positive: ... print(\u0026#34;positive?\u0026#34;) ... positive -= 3 I thought that after printing “positive?” 10 times , the variable “positive” would become negative, so the program would stop. But my answer didn’t pass the test, so I ran it locally to see what happened. To my surprise, the program didn’t stop! It’s an infinite loop. Why?\nBecause the boolean value of a negative number is True. Only the boolean value of 0 is False, while the boolean value of a positive or negative number is True, so bool(-2)=True .\nIn Python, the boolean value of False (or 0, or ‘’, or None) is False. The boolean value of others is True.\nThen how to evaluate the bool expression?\n2. Bool Expression A bool expression usually contains logic operators such as and, or, not.\n(1) \u0026lt;exp1\u0026gt; and \u0026lt;exp2\u0026gt; The result of False and True is False, so for the expression \u0026lt;exp1\u0026gt; and \u0026lt;exp2\u0026gt; , only when the value of the first element \u0026lt;exp1\u0026gt; is True do we need to check the second element \u0026lt;exp2\u0026gt; . For example, the value of True and 0 is 0.\nThat is, and stops evaluating at the first false value. For example:\n\u0026gt;\u0026gt;\u0026gt; 0 and 2 0 \u0026gt;\u0026gt;\u0026gt; False and -2 False If all values evaluate to be True, the last value is returned. So the value of expression True and 3 is 3, while the expression 3 and True returns True. The following is another example of and between two numbers:\n\u0026gt;\u0026gt;\u0026gt; 2 and -3 -3 \u0026gt;\u0026gt;\u0026gt; -3 and 2 2 From the results above, you’ll see that the return value of a bool expression like \u0026lt;exp1\u0026gt; and \u0026lt;exp2\u0026gt; is not always True or False. Take True and 3 as an example, it evaluates the boolean value of \u0026lt;exp1\u0026gt; /\u0026lt;exp2\u0026gt; ( bool(3)=True ), but returns the actual value ( 3 ), so it’s a number.\n(2) \u0026lt;exp1\u0026gt; or \u0026lt;exp2\u0026gt; or expression uses an evaluating order like and expression. The result of True or False is True, so for the expression \u0026lt;exp1\u0026gt; or \u0026lt;exp2\u0026gt; , only when the value of the first element \u0026lt;exp1\u0026gt; is False do we need to check the second element \u0026lt;exp2\u0026gt; .\nThat is, or stops evaluating at the first true value. For example:\n\u0026gt;\u0026gt;\u0026gt; 0 or -1 -1 \u0026gt;\u0026gt;\u0026gt; 2 or -1 2 \u0026gt;\u0026gt;\u0026gt;True or 2 True \u0026gt;\u0026gt;\u0026gt;0 or False or -3 or 1 / 0 -3 Here the last element 1/0 in the last expression won’t be evaluated, otherwise it’ll produce an error.\nIf all values evaluate to be False, the last value is returned. For example:\n\u0026gt;\u0026gt;\u0026gt; False or 0 0 \u0026gt;\u0026gt;\u0026gt; 0 or False False (3) not \u0026lt;exp\u0026gt; Unlike and and or expression, not expression returns the opposite boolean value of \u0026lt;exp\u0026gt;, so the result is either True or False. For example:\n\u0026gt;\u0026gt;\u0026gt; not 10 False Reference:\nLab 1: Variables \u0026amp; Functions, Control | CS 61A Fall 2020\ndisc01| CS 61A Fall 2020\n","permalink":"https://juliecodestack.github.io/2023/01/07/bool_expression/","summary":"\u003cp\u003eWe know that the boolean value of 0 is False, and the boolean value of 1 is True. What about the boolean value of a negative number, for example, -2 ? What’s the result of the expression \u003ccode\u003eTrue and 3\u003c/code\u003e in Python? Is it True or False, or other value? Let’s find it out.\u003c/p\u003e","title":"What’s the return value of a bool expression in Python?"},{"content":"Maybe you just began to use Linux, or maybe you need to run programs in Terminal/Shell, in both cases, you need a command reference or cheat sheet. Here’s what you’re looking for, a list of some basic commands with examples.\n1. Work on Directories (or Folders in Windows) ls : list ls : to list all the directories/files in the current directory(folder).\npwd : present working directory pwd: to show the current file path.\ncd : change directory cd folder_name: to change directory to the directory(folder).\nFor example, cd folder1 changes the directory to the subfolder “folder1” in the current folder.\nThree special signs for directory:\n. : current directory\n.. : parent directory, thus cd .. means changing to the parent directory.\n~ : home directory, thus cd ~ means changing to the home directory. We can also type cd for the same result.\nmkdir : make a directory mkdir folder_name : to make a new directory (folder).\nrm -r : remove rm -r folder_name : to remove the whole directory (folder) ( “-r” means recursively).\nWarning: In UNIX, when you rm a file or directory, it\u0026rsquo;s gone. There is no Recycle bin or Trash for you to \u0026ldquo;undo\u0026rdquo; rm, so please think twice before you use it.\n2. Work on Files echo : similar to “print” echo content : to print the content on the screen.\necho content\u0026gt;\u0026gt;filename.filetype: to write to the file.\ncat : display cat filename.filetype : to display the content of the file.\ntouch : create a file touch filename.filetype: to create a new empty file.\nThe following example uses these three commands. First we use echo to print “hello” on the screen :\n\u0026gt;echo \u0026#34;hello!\u0026#34; hello! Then we create a new directory named “example”, and use touch to create a new txt file named “ex01” in it.\n\u0026gt;mkdir example \u0026gt;cd example /example\u0026gt; touch ex01.txt /example\u0026gt; ls ex01.txt When we type cat ex01.txt, the output is nothing, because “ex01.txt” is an empty file.\n/example\u0026gt; cat ex01.txt We can use echo command to write something into “ex01.txt” :\n/example\u0026gt; echo \u0026#34;hello\u0026#34;\u0026gt;\u0026gt;ex01.txt Now using cat command, we’ll see the content of “ex01.txt”:\n/example\u0026gt; cat ex01.txt hello We can also write many times, the content will be added to the file :\n/example\u0026gt; echo \u0026#34;Let us learn Python.\u0026#34;\u0026gt;\u0026gt;ex01.txt /example\u0026gt; cat ex01.txt hello Let us learn Python. mv : move mv source_path dest_path ：to move the file/directory from the source_path to the dest_path.\nThere are two ways of using mv:\n1.mv source_file/directory dest_directory : to move the source file/directory to the dest_directory\n2.mv source_file dest_file : to rename the source_file, now the file name is dest_file. If dest_file has already existed, it will be overwritten as the content of the source file.\nLet’s see an example. Here we still use the “example” folder in the previous example, with “ex01.txt” inside it.\n/example\u0026gt; ls ex01.txt First we create a new folder named “sub_example” as the dest_directory.\n/example\u0026gt; mkdir sub_example /example\u0026gt; ls ex01.txt sub_example/ The folder “sub_example” is empty now:\n/example\u0026gt; ls sub_example (1) use mv source_file/directory dest_directory to move a file :\n/example\u0026gt; mv ex01.txt sub_example Now the file “ex01.txt” is in the subfolder “sub_example”, not in the folder “example”:\n/example\u0026gt; ls sub_example/ /example\u0026gt; ls sub_example ex01.txt (2) use mv source_file dest_file to rename a file :\n/example\u0026gt; cd sub_example .../sub_example\u0026gt; mv ex01.txt ex02.txt Here the file name is changed from “ex01” to “ex02”.\n.../sub_example\u0026gt; ls ex02.txt .../sub_example\u0026gt; cat ex02.txt hello Let us learn Python. You may wonder: what will happen if the dest_file has already existed?\nWe create a file “ex03.txt” with the content “another txt file”.\n.../sub_example\u0026gt; touch ex03.txt .../sub_example\u0026gt; echo \u0026#34;another txt file\u0026#34;\u0026gt;\u0026gt;ex03.txt .../sub_example\u0026gt; cat ex03.txt another txt file After typing mv ex02.txt ex03.txt, there will be a prompt to check if you really want to overwrite dest_file “ex03.txt”.\n.../sub_example\u0026gt; mv ex02.txt ex03.txt mv: overwrite \u0026#39;ex03.txt\u0026#39;? y If you type “y”, “ex03.txt” will be overwritten as the content of “ex02.txt”.\n.../sub_example\u0026gt; ls ex03.txt .../sub_example\u0026gt; cat ex03.txt hello Let us learn Python. cp : copy cp file/directory dest_directory: to copy the file/directory to the dest_directory.\nFor mv/ cp command, if the dest_directory is the current directory, we can write . instead.\nrm : remove rm file_name: to remove a single file. Here only a file is removed, so -r is not needed.\nunzip unzip file_name.zip : to unzip the .zip file.\n3. Miscellaneous man command_name: to display manual pages for the command.\nReference\nLab 0: Getting Started | CS 61A Fall 2020\nUNIX tutorial | CS 61A Fall 2020\ntouch command in Linux with Examples - GeeksforGeeks\n","permalink":"https://juliecodestack.github.io/2023/01/04/shell_command/","summary":"\u003cp\u003eMaybe you just began to use Linux, or maybe you need to run programs in Terminal/Shell, in both cases, you need a command reference or cheat sheet. Here’s what you’re looking for, a list of some basic commands with examples.\u003c/p\u003e","title":"Beginner’s guide to shell commands"},{"content":"Hello, I’m Julie. I’m interested in AI, Machine Learning, Python and Programming. Here I write down what I’ve learned, or how to solve the problems I met.\nI also like:\nreading, such as sci-fi, non-fiction, biography… listening to audiobooks. learning new things. ","permalink":"https://juliecodestack.github.io/about/","summary":"\u003cp\u003eHello, I’m Julie. I’m interested in AI, Machine Learning, Python and Programming. Here I write down what I’ve learned, or how to solve the problems I met.\u003c/p\u003e\n\u003cp\u003eI also like:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003ereading, such as sci-fi, non-fiction, biography…\u003c/li\u003e\n\u003cli\u003elistening to audiobooks.\u003c/li\u003e\n\u003cli\u003elearning new things.\u003c/li\u003e\n\u003c/ul\u003e","title":"About"},{"content":"我去年入门 GitHub，一开始不知道从哪开始学，在网上查找了很多文章、教程学习。这篇文章就是以我刚学习时的小白视角写的，希望能帮助到想开始学 GitHub 又不知如何上手的学习者。\n因为我也是初级水平，文中介绍的知识基于我自己的学习理解，如果有疏漏错误之处，欢迎您留言指正，谢谢！\n新手小白可能会对 GitHub 有以下困惑：\n1.GitHub 是个什么网站？\n2.为什么一说学 GitHub，就听到人家说要学 Git？这两个有什么关联吗，是不是一回事？\n3.听说 GitHub 是个开源社区，可以在上面与其他人一起切磋技术、完善代码，具体是怎么与别人交流呢？\n下面，我从这几个方面进行解答。\n一、带你浏览 GitHub 网站，看看都有些什么？ 1. 注册账号 打开 GitHub网站，首页如下图所示，点击右上角Sign up按钮，进入注册页面。使用电子邮件注册，设置好用户名和密码，即可生成账号。完成注册后，点击旁边的Sign in按钮登录。\n注册/登录页面 2. 登录 GitHub，浏览页面 登录进去后，我们见到的页面分成三大版块，如下图所示，从左至右依次为：自己的仓库(Repositories)、关注的人的动态、发现新的热门/有趣仓库。\n登录后首页示例 可能的疑问：Repository? 仓库？是不是有点不好理解？\n我在初学时也遇到这一困惑。\u0026ldquo;repository\u0026quot;有“仓库”的意思，我们可以理解成存放项目所需的各类文件的仓库。等熟悉了之后，你会发现 GitHub 上各种仓库都有，不是只包含程序代码，还有学习课程文档等等，难怪会叫仓库，哈哈。Repository（仓库）在 GitHub 上有重要作用，我们以后的很多操作都是在 Repository（仓库）中进行。\n点击右上角的个人头像，在下拉列表中选择 Your profile 项，到达个人主页。下图所示为我的个人主页。\n个人主页示例 你如果打开另一个人的主页，看到的界面风格也大致如此。我在图中简要注明了页面中的各项功能，此外：\n点击账户名下方的Edit profile按钮，可以修改自己的个人信息，比如这里的一句话简介，公司、地址、联系方式等。而如果是别人的个人主页，这里我们看到的就是Follow（关注）按钮。 粉丝和关注的人数右边有个星星图标，这就是传说中的 Star。我们看技术文章可能常会遇到如“程序员必看！GitHub 上 Star 数过万的项目！”，“该项目在 GitHub 上迅速收获上千 Star 数” 类似的介绍，看来 Star 数是个很重要的标识哦！那么，Star 是什么意思呢？比如，我们觉得一个仓库不错，在右上角点个 Star，就相当于是收藏+点赞了，之后还可以在自己的主页中点击星星图标查看。 仓库页面-Star \u0026ldquo;Pinned\u0026quot;区域是自己的个人展示区，在自己的仓库中精选几个放到这里展示，让别人能很快发现你的闪光点。 活跃度表格：上面的绿色格子越多，颜色越深，说明该用户在 GitHub 上提交次数越多，是活跃用户。 二、GitHub 是 Git 软件用户的项目管理中心 1. Git GitHub 之所以得此名，与一款分布式版本控制软件 Git 是分不开的。通俗地讲，Git 软件记录了你每次修改时的文件状态。更妙的是，如果你改着改着，又觉得以前的版本更好，还可以回溯呢，也就是说，有“后悔药”可吃了！同时， Git 也是一款极佳的协作软件。打个简单的比方，我和小红、小蓝三个人一起修改一篇文章，每个人改的地方可能都不一样，那么合并修改稿就是个头疼的事。或者，我先修改、再给小红修改、最后小蓝修改？这样效率又降低了。怎么办？用 Git，我们三个人可以建立修改分支，同时进行修改工作，最后合并分支。你可能会问，如果你们三个人在同一个地方做了不同的修改，还能合并吗？放心吧，软件考虑了这种“冲突”情况，有相应的解决办法。\n既然 Git 可以协作，那总要有一个地方让使用的人们存放文件、修改等信息呀，就像控制中心一样，这样，GitHub 应运而生。这里多说一句，Git 的托管中心不是只有 GitHub 哦，GitHub 是方便个人用户、开源项目建立的网站。有的企业会自己搭建服务器和云盘构建托管中心，同样也是用 Git 软件进行协作管理。\n那么，怎么用 Git 软件呢？\n（1）先到 Git官网下载安装 Git 软件。\n（2）安装成功后，选定一个文件夹，在右键菜单中选择Git Bash Here，会弹出一个黑色的命令行界面，输入语句，就可以在当前文件夹中运行 Git 命令。\n这里推荐学习一下廖雪峰老师的Git教程，讲解得明白易懂，从中我们可以了解 Git 的各种操作。然后，跟着教程的讲解，自己建个新文件夹动手练练。\n2. Git 基本命令 Git 命令还是挺多的，但是对新手来说，我们可以先掌握几个在 GitHub 上常用的 Git 基本命令：\n（1）提交修改：git add和 git commit\ngit操作示意图，图片来自Git官网 上面的示意图来自 Git 官网，说明了 Git 中最重要的操作 \u0026ldquo;git add\u0026rdquo; 和 \u0026ldquo;git commit\u0026rdquo; 的工作流程。 Git 软件的核心是保存修改。working directory 是工作区，就是我们的电脑上当前工作的文件夹。staging area 可以理解成暂存区或者中转站，git add .（注意：这里 add 和.中间有个空格）提交了修改，放在 staging area 暂存，再通过 git commit -m\u0026quot;修改说明文字\u0026quot; 确定最终提交版。不要小看这个缓冲的暂存区，它为我们修改时提供了“后悔药”。这个效果就有点类似于我们平时在电脑上删除文件，文件不会直接删除，而是放到回收站中转一下。如果我们过后发现手抖误删了，还可以到回收站里把文件“还原”回去，或者确定都不需要了，就点击“清空回收站”，把这些文件都删除。\n（2）与远程仓库同步：git pull 和 git push\n在多人协作的情况下，比如前面提到的我和小红、小蓝一起写文章的例子，可能每个人的修改不一致，要保持同步。而我们要从远程仓库获取更新和推送自己的修改，就要用git pull 和 git push。前面提到的 git commit 是确定我自己最终的修改结果，git push 则是将这一修改结果提交到远程（比如 GitHub上）的 repository（仓库）保存。我始终记得廖雪峰老师教程里提的要点：每天开始工作的第一件事是 git pull，跟上项目最新的修改进度。结束一天工作、提交修改时，先 git pull 再 git push。\n（3）下载 repository（仓库）： git clone\n打开一个仓库，我们会看到Code按钮，点击后，下面出现 HTTPS 地址和 SSH 地址。我们只要复制了这个地址，然后在电脑上右键点击存放文件夹，打开 Git Bash 客户端，输入命令行：git clone 复制的地址，就能下载这个仓库到本地电脑。\n下载仓库示意图 需要注意的是，用 HTTPS 地址需要账户验证。使用 SSH 地址只需要第一次时提交 SSH Key 到 GitHub ，后续无需每次验证，很方便，接下来就会介绍如何配置 SSH Key。\n注：写这篇文章时，我也出现了一个困惑：不知道是否因为我已经用 SSH 验证了，我用git clone HTTPS 地址下载时，也没有要求输入账户名和密码验证。小伙伴们请把你们实践的结果告诉我一下呀，谢谢！\n三、新手必备的GitHub基本操作 1. 配置SSH Key （1）第一次使用时，要配置一下账户。\n在 Git Bash 客户端，输入：\ngit config --global user.name \u0026#34;这里输入你在GitHub的账户名\u0026#34; git config --global user.email \u0026#34;这里输入你在GitHub的注册邮箱名\u0026#34; （2）检查是否已经有 SSH Key了，如果没有就生成一个。\n同样在 Git Bash 客户端，先后输入：\ncd ~/.ssh 和\nls 我的账户已经生成了 SSH Key，就有了下面所示的 id_rsa 和 id_rsa.pub 。请注意，id_rsa.pub 是公钥，后面要把这个公钥上传到 GitHub 上验证。id_rsa 是你自己的私钥，要保存好。\nid_rsa id_rsa.pub known_hosts 如果没有 SSH Key，就要输入以下命令行生成：\nssh-keygen -t rsa -C \u0026quot;这里输入你在 GitHub 的注册邮箱\u0026quot;\n生成后再输入上面的 cd ~/.ssh 和 ls 命令，就可以看到 SSH Key 了。\n（3）复制公钥。\n接着在 Git Bash 客户端，输入命令行：\ncat id_rsa.pub\n这样会显示公钥文件内容，我们把它复制到剪贴板。\n（4）把复制的公钥添加到 GitHub 账户安装。\n登录 GitHub 账户，点击右上角个人头像的下拉菜单，如下图所示：\n个人头像的菜单项 依次点击 Settings \u0026gt; SSH and GPG Keys，在 SSH Keys 页面右上角有个 New SSH Key 按钮，点击该按钮后，粘贴上刚才复制的公钥内容。里面的 “title” 项就是为自己的 SSH Key 命个名，可根据个人喜好随意。\n（5）最后，检查一下 SSH Key 是否安装成功。\n在 Git Bash 客户端运行命令：\n$ ssh -T git@github.com\n出现类似下面的提示，表示安装成功：\nHi Juliecodestack! You\u0026#39;ve successfully authenticated, but GitHub does not provide shell access. 2. 我的第一个 GitHub 项目：如何新建上传仓库 学了这么多基本功，我们终于要练手了，哈哈，先来建一个自己的仓库玩玩吧！\n（1）在 GitHub 中新建仓库\n如下图所示，点击个人主页的 Repositories 项，再点击右方的 New 按钮，新建一个仓库。\n仓库页面-新建按钮 我这里做了一个简单的示范，如下图所示，你可以照着我的模板填，最后点击最下方的 Create repository 按钮，即可创建一个新的仓库。\n新建仓库填写页面 打开新建的仓库，如下图所示，这个仓库的 Readme 文档的内容就是刚才填入的仓库名和说明。我们点击Code 按钮，复制 SSH 地址。\n仓库页面-testexample2020 （2）把仓库文件下载到电脑。\n假设我们要下载到电脑上的目标文件夹（为了描述方便，这里简称为文件夹 A），那么我们就右键点击文件夹 A ，在右键菜单中选择 “Git Bash”，在 Git Bash 客户端输入命令行：\ngit clone SSH地址\n这样，仓库就会下载到文件夹 A 中。\n（3）修改仓库文件，使用 Git 命令提交修改并推送至 GitHub。\n下载仓库完成之后，我们会发现文件夹 A 中有了一个新的子文件夹，比如我在前一步骤下载了仓库 testexample2020，此时文件夹 A 中就出现了一个名为\u0026quot;testexample2020\u0026quot;的新文件夹，这就是下载到本地电脑的仓库。我们打开这个新文件夹（\u0026ldquo;testexample2020\u0026rdquo;），使用 VSCode 或 Atom 编辑器（编辑器的使用方法可参考我的文章：一篇文章带你入门Markdown），在 Readme 文件里增加一行： hello,world!。再新建一个 main.py文件，输入一行简单的代码: print(\u0026quot;hello\u0026quot;)。\n修改好了之后，我们右键点击文件夹 testexample2020（注意：此时不是在母文件夹 A 上使用 Git Bash 了），打开 Git Bash 客户端，依次输入命令行：\ngit add .\ngit commit -m\u0026quot;v0.1\u0026quot;\ngit push\n这样修改就推送到了 GitHub 上的仓库中。\n（4）登录 GitHub，查看一下仓库的变化。\n登录 GitHub 后我们发现，刚才做的改动都同步到了 GitHub 仓库中，如下图中标示：\n仓库页面-改动后 3. 和别人一起做项目：Fork 和 Pull request 前面提到过，GitHub 是个开源社区，我们可以参加到开源项目之中，那么，具体是怎么操作呢？\n举个我自己的例子来说明一下这个过程吧。\n（1）Fork 一个别人的仓库\n我在学习 API 接口时，网上的微博 API 工具包很多是基于 Python2 写的，我在 Github 找到了一个 Python3 的版本 sinaweibopy3，如下图所示。我用了一下，觉得很好，看到作者没有写 Readme，我就想添加一个 Readme 说明文档，让别人能更快地了解这个仓库的功能和使用方法，也就是说，我想对这个仓库做一些修改。这种情况下，我就要先 Fork 一下这个仓库到我自己那儿。\nsinaweibopy3仓库页面 为什么要 Fork 呢？ Fork有“叉子”的意思，也就是从原仓库复制建一个我自己的分支（分叉），这样，我做的改动只是在我自己的分支上，不会影响到原仓库，除非我提交的 Pull request 被接受后。\nFork 之后，在我的仓库里就出现了一个相同的仓库 sinaweibopy3，如下图所示。不同之处在于，仓库名下方有个备注：\u0026ldquo;Forked from olwolf/sinaweibopy3\u0026rdquo;。\nFork的仓库 （2）对自己 Fork 的仓库做修改\n接下来，我就对 Fork 的 sinaweibopy3 仓库做修改，添加了一个 Readme 文档。具体方法请参考上一步 “2.我的第一个 GitHub 项目：如何新建上传仓库” 的示例，可以先 git clone 下载到本地文件夹，修改后再 git push 推送到 GitHub。\n（3）提交 Pull request\n如下图所示，点击 Pull request，在弹出的界面填写一些信息，告诉原仓库的作者你做了什么修改、为什么要修改等，方便作者了解你对仓库的改动，然后提交，Pull request 请求就会发送至原仓库的作者。\nPull request示例 （4）等待原仓库的作者查看和决定是否接受修改。\n提交了 Pull request 后，我们就等待一段时间，原仓库的作者会决定是否接受修改。\n这里，仓库 sinaweibopy3 的原作者 olwolf 合并了我的修改，如图所示，这样原仓库中也增加了Readme文件。同时，我也因此成为了仓库贡献者 (Contributors) 之一。\n接受Pull request后原仓库的变化 四、总结 完成以上学习，我们基本上就入门了，接下来，你可以自己在 GitHub 上探索一下，比如搜索发现一些有趣的项目，关注一些高手大牛，加入到开源项目中，等等。最重要的是，动手练习！一旦上手实践，慢慢熟悉之后，你会发现没有开始想象的那么难，一起加油吧！\n最后，推荐几个好的学习教程：\n1.GitHub 帮助页面\n2.廖雪峰老师的Git教程\n3.GitHub如何配置SSH Key\n","permalink":"https://juliecodestack.github.io/2020/12/13/github%E5%85%A5%E9%97%A8/","summary":"\u003cp\u003e我去年入门 GitHub，一开始不知道从哪开始学，在网上查找了很多文章、教程学习。\u003cstrong\u003e这篇文章就是以我刚学习时的小白视角写的，希望能帮助到想开始学 GitHub 又不知如何上手的学习者。\u003c/strong\u003e\u003c/p\u003e","title":"GitHub入门指南"}]